📚 CSS Positioning

Position

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

簡而言之

Image source: Difference between css position absolute versus relative