CSS Position定位元素分析

<style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }
      .item {
        width: 800px;
        min-height: 1800px;
        border: 1px solid lightslategray;
        position: relative;
        margin: 30px;
      }
      .item1 {
        width: 500px;
        height: 100px;
        background-color: lightcoral;
        position: relative;
        /* 是相对其自身的位置进行偏移，原来的占位空间不变（依旧存在），后面的元素也不能顶上来。经常被用来作为绝对定位元素的容器块 */
        left: 50px;
        top: 50px;
      }
      .item2 {
        width: 600px;
        height: 120px;
        background-color: lightgreen;
        position: absolute;
        /* 位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html> */
        left: 300px;
        top: 10px;
      }
      .item3 {
        width: 500px;
        height: 100px;
        background-color: yellow;
        position: fixed;
        /* 不随着页面的滚动而改变位置，始终在固定位置显示 */
      }
      .item4 {
        width: 90%;
        height: 50px;
        background-color: blue;
        position: sticky;
        /* 首先占用文档流位置显示，当鼠标滑动后正常显示该位置，但当临界屏幕位置后，该元素按照设定的位置固定（不再随着屏幕滚动）*/
        /* 指定 top, right, bottom 或 left 四个其中之一，才可使粘性定位生效 */
        left: 10px;
        /* top: 30px; */
        /* 默认显示在屏幕最顶部，但当页面滚动的时候，该位置一直固定在此，不随着屏幕滚动。 */
        bottom: 0;
        /*默认显示在屏幕最底部，但当页面滚动到应该显示该元素的时候，则随着屏幕继续上移，不再继续固定，开始显示别的元素*/
      }
      p {
        margin-top: 250px;
      }
    </style>
    <div class="item">
      <div class="item1">item1</div>
      <div class="item2">item2</div>
      <div class="item3">item3</div>
      <p>asas</p>
      <p>asas</p>
      <p>asas</p>
      <p>asas</p>
      <p>asas</p>
      <p>asas</p>
      <p>asas</p>
      <p>asas</p>
      <div class="item4">item4</div>
      <p>asas000</p>
      <p>asas</p>
      <p>asas</p>
      <p>asas</p>
      <p>asas</p>
      <p>asas</p>
      <p>asas</p>
      <p>asas</p>
    </div>
    <p>asas</p>
    <p>asas</p>
    <p>asas</p>
    <p>asas</p>
    <p>asas</p>
    <p>asas</p>
    <p>asas</p>
    <p>asas</p>
相关文章
