CSS-静态定位，相对定位，绝对定位，固定定位的用法和区别详解

小灰灰 2023-06-03 02:53 20阅读 0赞

CSS 提供了三种基本的定位机制：普通流、浮动和定位；通过这三种方式可实现页面的排版布局

#### 普通流、浮动、定位 ####

*  普通流
    
     *  普通流中的元素的位置由元素在 (X)HTML 中的位置决定
     *  块级元素独自占一行，在文本流中从上到下一个接一个地排列
     *  行内元素在一行中并排排列，遇到父元素的边沿会换行继续排列
 *  浮动
    
     *  浮动会让元素脱离标准文档流，不再占原来的空间，可以让多个块级元素并排显示
 *  定位
    
     *  定位是将元素定在某个位置，定位的元素的层级要高于浮动元素
     *  通过定位可以让元素相对于其正常位置进行偏移出现在别的位置，或者相对于父元素、另一个元素甚至浏览器窗口本身的位置
     *  定位可以将元素放置在页面中的任何位置，这是标准文档流和浮动无法实现的

CSS 通过 `position` 属性设置定位方式，其对应的属性值如下：

<table> 
 <thead> 
  <tr> 
   <th align="left">属性值</th> 
   <th align="left">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">static</td> 
   <td align="left">静态定位，默认的定位方式</td> 
  </tr> 
  <tr> 
   <td align="left">relative</td> 
   <td align="left">相对定位</td> 
  </tr> 
  <tr> 
   <td align="left">absolute</td> 
   <td align="left">绝对定位</td> 
  </tr> 
  <tr> 
   <td align="left">fixed</td> 
   <td align="left">固定定位</td> 
  </tr> 
 </tbody> 
</table>

绝对定位和固定定位会改变元素的 display 属性，默认将元素转为 行内块元素

#### static 静态定位 ####

*  按照标准文档流的规则来放置元素，基本不用

#### relative 相对定位 ####

*  相对于自己在标准文档流中的位置进行定位；原来的位置仍占有空间

#### relative 绝对定位 ####

*  通过设置了定位的父级元素或祖先元素来进行定位
 *  如果父元素或祖先元素没有定位则相对于页面文档进行定位
 *  绝对定位的元素脱离标准文档流，不再占有原来的位置
 *  使用绝对定位的元素父元素一般设置为相对定位

#### absolute 固定定位 ####

*  相对于浏览器可视窗口进行定位，位置与父元素无关
 *  会将元素固定在窗口的某个位置不随页面的滚动而改变

想实现元素的定位，只设置定位方式还是不够的，需要结合 CSS 中的方位属性来实现定位

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th align="left">作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>left</td> 
   <td align="left">定位元素左外边距边界与其父元素左边界之间的偏移（元素的左边缘与参照元素位置间的距离）</td> 
  </tr> 
  <tr> 
   <td>right</td> 
   <td align="left">右边缘</td> 
  </tr> 
  <tr> 
   <td>top</td> 
   <td align="left">上边缘</td> 
  </tr> 
  <tr> 
   <td>bottom</td> 
   <td align="left">下边缘</td> 
  </tr> 
 </tbody> 
</table>

属性值可以是 px、cm、% 等；使用时一般是 水平方向的属性（left、right）与垂直方向的属性（top、bottom）结合使用；top 与 bottom 不要同时使用，left 与 right 不要同时使用

##### 相对定位示例： #####

/* 父元素 */
    .parent { 
      width: 400px;
      height: 400px;
      border: 1px solid gray;
    }
    /* 两个子元素 */
    .box1, .box2 { 
      width: 200px;
      height: 200px;
    }
    .box1 { 
      /* 设置相对定位 */
      position: relative;
      /* 相对元素原来的位置距离上边缘 50px */
      top: 50px;
      /* 相对于原来的位置距左边缘 100px */
      left: 100px;
      background-color: green;
    }
    .box2 { 
      background-color: blue;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]

##### 绝对定位示例： #####

/* 父元素 */
    .parent { 
      width: 400px;
      height: 400px;
      /* 父元素设置相对定位 */
      position: relative;
      border: 1px solid gray;
    }
    /* 两个子元素 */
    .box1, .box2 { 
      width: 200px;
      height: 200px;
    }
    .box1 { 
      background-color: red;
    }
    .box2 { 
      /* 设置绝对定位 */
      position: absolute;
      /* 距离父元素上边缘 50px */
      top: 50px;
      /* 距离父元素左边缘 100px */
      left: 100px;
      background-color: purple;
    }

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70]: /images/20230601/264c7f4213f24001afca3bbd046b720e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDQ4NjUzOQ_size_16_color_FFFFFF_t_70 1]: /images/20230601/8bb6e2aca57a4d1692ce703bcff3ad1c.png