搞清position:relative

position的五个属性中的relative

所需知识点

• 绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。
• position:relative对象不可层叠（意思就是加上改属性后会提高层级，相当于做了z-index层级调整）
• 该属性不会脱离文档流，但依然有层级。

例子

• html

    <div class="big">
        <div class="box"></div>
    </div>

• css

   .big::before {
        content: '';
        display: block;
        width: 100%;
        height: 100%;
        background-color: blue;
        position: absolute;
        top: 0;
        left: 0;
    }
    .box {
        position: relative;
        /* z-index: -1; */
        width: 200px;
        height: 200px;
        background-color: red;
    }

    .big {
        position: relative;
        width: 500px;
        height: 500px;
        border: solid 1px #ddd;
    }

• 运行

  
  image.png

以上为个人理解

position:sticky

阮一峰
应用：
https://jsbin.com/qukusoyolu/edit?html,css,output

div {
  height: 100vh;
  width: 100%;
  position: sticky;
  top: 0;
}