📚 CSS Positioning

📚 CSS Positioning
Photo by KOBU Agency / Unsplash

Position

position.png

⚙️ static

  • 元素在文檔流中正常定位,與其他元素一樣 (預設)。
.box {
  position: static;
  left: 50px; /* ignore */
  top: 50px; /* ignore */
}

⚙️ relative

  • 相對於原始位置移動。
  • 該元素周圍的其他元素仍然會保持原位繞過它,將其視為文件流的一部分,不受影響。
.box {
  position: relative;
  left: 50px;
  right: 50px;
}

⚙️ absolute

  • 絕對定位是以最近的父元素為基準點,進行定位。
  • 如果沒有父元素,或者它的父元素沒有設定 static 以外的屬性 (通常用 relative),它就會以document為基準點進行定位 🔥
  • 頁面捲動會跟著動。
  • 元素會被移出正常文件流,並不為元素預留空間。
.container {
  position: relative; /* 不能為 static,不然會定位到文檔左上角 */
}

.box {
  position: absolute;
  left: 50px;
  right: 50px;
}

⚙️ fixed

  • 相對於瀏覽器窗口 (viewport) 進行定位。
  • 即使捲動,還是貼在瀏覽器上方定位。
  • 這種定位方式常用於創建固定在頁面上方或側邊的導航欄、工具欄等元素,使其在用戶滾動頁面時保持可見。
  • 元素會被移出正常文件流,並不為元素預留空間。
.box {
  position: fixed;
  left: 50px;
  right: 50px;
}

簡而言之

position2.png
Image source: Difference between css position absolute versus relative