弄明白一直不懂的定位相关问题

相对定位

相对定位的元素是在文档中的正常位置偏移给定的值，但是不影响其他元素的偏移。

    <style>
      ._box * {
        display: inline-block;
      }
      .box {
        width: 50px;
        height: 50px;
        background-color: red;
      }
      #ss {
        position: relative;
        left: 20px;
        top: 20px;
        background: black;
        color: white;
      }
    </style>

    <div class="_box">
      <div class="box">one</div>
      <div class="box" id="ss">two</div>
      <div class="box">three</div>
    </div>

呈现效果

绝对定位

绝对定位的元素则脱离了文档流。在布置文档流中其它元素时，绝对定位元素不占据空间。绝对定位元素相对于最近的非 static 祖先元素定位。当这样的祖先元素不存在时，则相对于ICB（inital container block, 初始包含块）。

      ._box {
        position: relative;
        top: 50px;
        left: 50px;
        border: 1px solid;
        height: 300px;
        width: 300px;
      }
      .box {
        width: 100px;
        height: 100px;
        background: rgb(40, 196, 162);
      }
      #two {
        position: absolute;
        left: 50px;
        bottom: 20px;
      }

    <div class="_box">
      <div class="box">one</div>
      <div class="box" id="two">two</div>
    </div>

呈现效果