我不知道的CSS - Position

作者：寫文章的自然醒 2021-07-14 11:25:12

開發前端

熟悉我的小伙伴可能知道，我最近回長沙工作了，由于之前大部分時間在做工具，Node.js 的開發比較多。but，現在又重新開始寫了一些業務代碼，發現 CSS 有很多博大精深的東西，所以，今天的文章復習一下 CSS 定位相關的東西。

[[411102]]

本文轉載自微信公眾號「自然醒的筆記本」，作者寫文章的自然醒。轉載本文請聯系自然醒的筆記本公眾號。

定位的類型

在最新的 CSS 規范中，定位的元素一共分為四種類型：

relative：相對定位元素
absolute：絕對定位元素
fixed：固定定位元素
sticky：粘性定位元素

如果元素沒有設置 position 屬性，默認為 static ，其所有定位相關的屬性(top/bottom/left/right/z-index)就會失效。

在不修改 position 屬性的情況下，冒然給它設置 top、left等屬性，會發現它巋然不動。

相對定位

相對定位是指元素在原來的位置上，進行一定的偏移，具體偏移到哪里，還是得看 top/bottom/left/right 這四個屬性的值。

下面給一個元素設置為相對定位(position: relative;)，然后讓元素距離頂部和左邊都為 30px。

<style> 
  div { 
    width: 200px; 
    height: 200px; 
    background: steelblue; 
  } 
  .relative { 
    position: relative; 
    top: 30px; 
    left: 30px; 
  } 
</style> 
<body> 
  <div class="relative"></div> 
<body/>

下面的圖片就是元素沒有加上 .releativ和加上 .releative 的區別。

元素在絕對定位的時候，其初始位置會被保留下來，也就是原來的位置上會留白。

div { 
  display: inline-block; 
  width: 200px; 
  height: 200px; 
} 
.box1 { 
  background: red; 
} 
.box2 { 
  background: yellow; 
} 
.box3 { 
  background: blue; 
} 
.relative { 
  position: relative; 
  top: 30px; 
  left: 30px; 
}

先為元素定義好樣式，在三個元素都沒有進行偏移時，如下所示：

<body> 
  <div class="box1"></div> 
  <div class="box2"></div> 
  <div class="box3"></div> 
<body/>

如果給第二個元素加上相對定位，第二個元素就會向右邊和下邊進行偏移，同時在原始的位置會空出來一塊。

<body> 
  <div class="box1"></div> 
  <div class="box2 relative"></div> 
  <div class="box3"></div> 
<body/>

絕對定位

絕對定位不會相對于原來的位置定位，而是會向上查找，找到一個非 static 的祖先元素進行定位，如果一直到 body 都沒有非 static 的元素，則會相對于 body 來進行定位。

<style> 
  body { /* 清理body默認樣式 */ 
    margin: 0; 
    padding: 0; 
  } 
  .box { 
    margin: 30px; 
    display: inline-block; 
    width: 300px; 
    height: 300px; 
  } 
  .box1 { 
    position: relative; 
    border: 3px solid red; 
  } 
  .box2 { 
    border: 3px solid yellow; 
  } 
  .box3 { 
    border: 3px solid blue; 
  } 
 
  .absolute { 
    /* 
    position: absolute; 
    top: 30px; 
    left: 30px; 
    */ 
    width: 100px; 
    height: 100px; 
    background-color: aquamarine; 
  } 
</style> 
<body> 
  <div class="box box1"> 
    <div class="box box2"> 
      <div class="box box3"> 
        <div class="absolute"></div> 
      </div> 
    </div> 
  </div> 
</body>

在未給最內部的 div 設置 position 屬性時，它是緊挨著 div.box3 的邊框的。下面我們給內部的 div 加上 position: absolute; ，讓其進行絕對定位。

.absolute { 
  position: absolute; 
  top: 30px; 
  left: 30px; 
  width: 100px; 
  height: 100px; 
  background-color: aquamarine; 
}

由于外面三層的 div.box 都是默認的 static 狀態，所以絕對定位的元素會相對于 body 進行定位，距離 body 的頂部和左邊 30px。

現在，給 div.box2 加上一個相對定位，此時的絕對定位元素就會相對于 div.box2 來進行定位。

.box2 { 
  position: relative; 
  border: 3px solid yellow; 
}

絕對定位除了定位的元素不同，它的初始位置也不會被保留，相當于脫離了文檔流。這里我們可以用之前相對定位的案例，布局三個 div，讓中間的 div 進行絕對定位。

<style> 
  div { 
    display: inline-block; 
    width: 200px; 
    height: 200px; 
  } 
  .box1 { 
    background: red; 
  } 
  .box2 { 
    background: yellow; 
  } 
  .box3 { 
    background: blue; 
  } 
 
  .absolute { 
    position: absolute; 
    top: 30px; 
    left: 30px; 
  } 
</style> 
<body> 
  <div class="box1"></div> 
  <div class="box2 absolute"></div> 
  <div class="box3"></div> 
</body>

可以看到，中間的 div 會相對于 body 進行定位，同時，它原來的位置也不會被保留。

固定定位

理解了相對定位和絕對定位，固定定位就比較好理解了。固定定位會相對于視窗進行定位，而且和絕對定位一樣也會脫離文檔流。這里寫一個簡單的例子：

<style> 
  .box { 
    width: 200px; 
    height: 200px; 
    border: 1px solid red; 
    margin: 100px; 
  } 
 
  .fixed { 
    position: fixed; 
    top: 30px; 
    left: 30px; 
    width: 100px; 
    height: 100px; 
    background-color: cadetblue; 
  } 
</style> 
<body> 
  <div class="box"> 
    <div class="fixed"></div> 
  </div> 
</body>

粘性定位

前面的內容都是復習，這個粘性定位確實是最近剛剛接觸的??，沒辦法 CSS 太菜了。

粘性定位可以理解為相對定位和固定定位的縫合，會出現這個屬性主要是現在很多 H5 頁面都會有這種在頂部固定的導航欄，看來 W3C 也是能看到我們普通開發者的需求的。

.sticky { 
  position: sticky; 
  top: 0; 
  margin-top: 50px; 
}

當我們給一個元素設置為粘性定位時，如果設置了 top: 0;，粘性定位的元素在它距離視窗頂部大于 0 的時候，會按照默認布局來，也就是和相對定位表現一致。一旦其距離頂部的距離等于 0，這元素會固定在窗口的這個地方，此時的表現和固定布局表現一致。

具體的效果如下：

有了這個屬性就可以少些很多 JavaScript 代碼了，通過幾行 CSS 就能實現一起需要引入一個插件才能實現的功能。原來現在的 CSS 已經這么厲害了。

最近更新公眾號的頻率明顯下降，而且內容也越來越水了，之前寫的 Go 筆記也沒什么深入的內容。最近因為換城市、換工作，然后也一時不知道寫什么，導致質量有明顯的下降，后面會慢慢恢復周更，然后會多寫一點前端框架和工程化方面的東西，共勉。

責任編輯：武曉燕來源：自然醒的筆記本