CSS四种定位布局方式

短命女 2022-08-29 09:48 331阅读 0赞

# 什么是定位？ #

一种高级的布局手段，通过定位可以将元素放到任意位置。

使用position属性可开启元素的定位，可选值：

<table style="width:500px;"> 
 <tbody> 
  <tr> 
   <td>static</td> 
   <td>默认值，不开启定位</td> 
  </tr> 
  <tr> 
   <td>relative</td> 
   <td>开启元素相对定位</td> 
  </tr> 
  <tr> 
   <td>absolute</td> 
   <td>开启元素绝对定位</td> 
  </tr> 
  <tr> 
   <td>dixed</td> 
   <td>开启元素固定定位</td> 
  </tr> 
  <tr> 
   <td>sticky</td> 
   <td>开启元素粘滞定位</td> 
  </tr> 
 </tbody> 
</table>

# 偏移量： #

元素的定位开启后，一般还得设置偏移量来辅助定位，四个偏移量分别为：top,bottom,left,right

top:定位元素和定位位置上边的距离

bottom：定位元素和定位位置下边的距离

left：定位元素和定位位置左边的距离

right：定位元素和定位位置右边的距离

# 相对定位： #

通过将position的值设置为relative，可开启元素的相对定位。

特点：

*  开启定位后，不设置偏移量，不会发生任何变化
 *  **相对定位是相对于元素在文档流（原来位置）的定位**
 *  相对定位提升元素的层次，但不会使元素脱离文档流，所以块还是块，行内还是行内

.box1{
                width: 100px;
                height: 100px;
                background-color: red;
                
            }
            .box2{
                width: 100px;
                height: 100px;
                background-color: green;
                position: relative;
                left:100px;
                top: -100px;
            }

![20210801154436331.png][]

# 绝对定位： #

### 包含块： ###

正常情况下：包含块就是离元素最近的祖先块元素

绝对定位元素的包含块是：离它最近的开启了定位的祖先块元素，没有符合条件的则包含块是初始块html

绝对定位：通过将position的值设置为absolute，可开启元素的绝对定位。

特点：

*  开启绝对定位后，如果不设置偏移量，元素本身的位置不会发生变化，但有些性质会变化。
 *  开启绝对定位后，元素的层次会提高，会从文档流中脱离，行内边块，块的默认大小会被内容撑开。
 *  **绝对定位是定位于包含块的。**

.box1 {
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                left: 0px;
                top: 0;
    
            }
    
            .box2 {
                width: 200px;
                height: 200px;
                background-color: green;
                position: relative;
            }
                /* box2包含box3 */
            .box3 {
                width: 100px;
                height: 100px;
                background-color: blue;
                position: absolute;
                left: 0;
                top: 0;
            }

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Nzk3Nzgz_size_16_color_FFFFFF_t_70][]

### 绝对定位在水平布局和垂直布局时都必须满足等式： ###

left+margin-left+border-left+padding-left+width+padding-right+border-right+margin-right=包含块内容区的宽度，且垂直方向也必须满足

也可以通过这个属性将元素在绝对定位下在包含块内居中，但是注意：left和right必须设置值，否则浏览器会优先调整left和right而不是margin，且left和right均为auto时，不会居中。

#  #

# 固定定位： #

将position的值设置为fixed，元素开启固定定位，固定定位的大部分和绝对定位一样，

唯一不同的是：固定定位是固定在浏览器的窗口的，不会随滚动条而滚动，常见于广告

# 粘滞定位： #

将position的值设置为sticky，元素开启粘滞定位，粘滞定位兼容性比较差，不支持ie

粘滞定位当滚动条滚动的时候元素到达某个位置时，可以固定在屏幕上不消失，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Nzk3Nzgz_size_16_color_FFFFFF_t_70 1][]

# 元素的层级： #

默认情况下(或者层级相等时)，结构上靠下的优先显示

但是也可以通过z-index来提高层级，z-index值越大层级越高，越优先显示

**注意：父元素不会盖过子元素，不管层级多高**

[20210801154436331.png]: /images/20220829/9fb2dfdb51e64274ace54f3e53e43e2f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Nzk3Nzgz_size_16_color_FFFFFF_t_70]: /images/20220829/972a486165b4483dbfd136cca3b192c8.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1Nzk3Nzgz_size_16_color_FFFFFF_t_70 1]: /images/20220829/876c0d33a0f1407daad7509c08d0c587.png