Position

position image

⚙️ 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;
}

簡而言之

Position 2 Image source: Difference between css position absolute versus relative