相对定位

• 设置相对定位

给元素设置 position: relative 即可实现相对定位。
可以使用 left、right、top 、 bottom 四个属性调整位置。

• 相对定位的参考点是相对自己原来的位置
• 相对定位的特点：
  1．不会脱离文档流，元素位置的变化，只是视觉效果上的变化，不会对其他元素产生任何影响。
  2．定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。

定位的元素会盖在普通元素之上。
都发生定位的两个元素，后写的元素会盖在先写的元素之上。
left不能和right一起设置，top和bottom不能一起设置。

绝对定位

• 设置绝对定位

给元素设置 position: absolute 即可实现绝对定位。
可以使用 left、 right、 top、 bottom

• 绝对定位的参考点是参考它的包含块。

包含块：
1．对于没有脱离文档流的元素：包含块就是父元素；
2．对于脱离文档流的元素：包含块是第一个拥有定位属性的祖先元素（如果所有祖先都没定位，那包含块就是整个页面）。

• 绝对定位元素的特点：
  1．脱离文档流，会对后面的兄弟元素、父元素有影响。
  2.left不能和right一起设置，top和bottom不能一起设置。
  3．绝对定位、浮动不能同时设置，如果同时设置，浮动失效，以定位为主。
  4．无论是什么元素（行内、行内块、块级）设置为绝对定位之后，都变成了定位元素。

举例：

    <style>
        .outer {
    
      
            width: 500px;
            background-color: skyblue;
            border: 1px solid black;
            padding: 20px;
            position: relative;
        }
        .box {
    
      
            width: 200px;
            height: 200px;
            font-size: 20px;
        }
        .box1 {
    
      
            background-color: #888;
        }
        .box2 {
    
      
            background-color: orange;
            position: absolute;
            top: 220px;
            left: 20px;
        }
    </style>

固定定位

• 设置固定定位：

给元素设置 position: fixed 即可实现固定定位。
可以使用 left、right 、 top 、 bottom四个属性调整位置。

• 固定定位的参考点：参考它的视口
• 固定定位元素的特点
  1．脱离文档流，会对后面的兄弟元素、父元素有影响。
  2.left 不能和right一起设置，top和bottom不能一起设置。
  3．固定定位和浮动不能同时设置，如果同时设置，浮动失效，以固定定位为主。
  4．无论是什么元素（行内、行内块、块级）设置为固定定位之后，都变成了定位元素。
  举例：

        .box2 {
    
      
            background-color: orange;
            position: fixed;
            bottom: 0;
            right: 0;
        }

粘性定位

• 设置粘性定位

给元素设置 position:sticky 即可实现粘性定位。
可以使用 left、 right、 top、 bottom 四个属性调整位置，不过最常用的是top值。

• 粘性定位的参考点：离它最近的一个拥有"滚动机制"的祖先元素，即便这个祖先不是最近的真实可滚动祖先。
• 粘性定位元素的特点
  1.不会脱离文档流，它是一种专门用于窗口滚动时的新的定位方式。
  2.粘性定位和相对定位的特点基本一致，不同的是：粘性定位可以在元素到达某个位置时将其固定。

举例：

        .nav {
    
      
            background-color: skyblue;
            font-size: 40px;
            position: sticky;
            top: 0px;
        }

定位层级

1．定位元素的显示层级比普通元素高，无论什么定位，显示层级都是一样的。
2．如果位置发生重叠，默认情况是：后面的元素，会显示在前面元素之上。
3．可以通过css属性 z-index调整元素的显示层级。
4. z-index 的属性值是数字，没有单位，值越大显示层级越高。
5．只有定位的元素设置 z-index 才有效。
6．如果z-index值大的元素，依然没有覆盖掉z-index值小的元素，那么请检查其包含块的层级。