定位 (Positioning) 是 CSS 中的一個重要概念，用來控制元素在頁面中的位置。透過不同的定位方法，我們可以精確地控制元素相對於其父元素或其他元素的擺放。CSS 提供了多種定位方式，每一種都有其特殊用途。

position 屬性

position 是控制元素定位的核心屬性，有四種常見的取值：static、relative、absolute、fixed 和 sticky。默認情況下，所有元素的 position 屬性值為 static。

• static (靜態定位)：

  • 預設的定位方式。
  • 元素按照正常文檔流排列，無法改變位置。
  • 不受 top、bottom、left、right 屬性影響。

• relative (相對定位)：

  • 元素仍保持在文檔流中的位置，但可以通過 top、bottom、left、right 進行微調。
  • 不會影響其他元素的位置，改變位置只是相對於其初始位置進行偏移。

  .relative-box {
      position: relative;
      top: 10px;
      left: 20px;
  }
  

• absolute (絕對定位)：

  • 元素脫離正常文檔流，依附於最近的已定位 (position 不為 static) 的父元素，或是根元素進行定位。
  • 可以使用 top、bottom、left、right 屬性來精確控制位置。

  .absolute-box {
      position: absolute;
      top: 50px;
      left: 100px;
  }
  

• fixed (固定定位)：

  • 元素相對於瀏覽器視窗進行定位，即使頁面滾動，元素也保持固定在指定位置。
  • 常用於導航欄或固定的浮動按鈕。

  .fixed-box {
      position: fixed;
      top: 0;
      right: 0;
  }
  

• sticky (黏性定位)：

  • 結合了 relative 和 fixed 的特性。元素相對於父元素進行定位，但當滾動到一定位置時，會變成 fixed，固定在螢幕的某個位置。
  • 常用於滾動頁面時，讓導航欄保持可見。

  .sticky-box {
      position: sticky;
      top: 10px;
  }
  

z-index 屬性

• z-index 屬性用來控制重疊元素的堆疊順序。數值越大，元素越靠上。僅對 position 值為 relative、absolute、fixed 或 sticky 的元素有效。

  .element {
      position: absolute;
      z-index: 10;
  }
  

top、bottom、left、right 屬性

• 這四個屬性用來調整已定位元素的位置，僅適用於 relative、absolute、fixed 和 sticky 定位方式。

  • top：距離包含塊的頂部距離。
  • bottom：距離包含塊的底部距離。
  • left：距離包含塊的左側距離。
  • right：距離包含塊的右側距離。

總結

• 靜態定位 (static) 是默認值，無法使用 top、left 等屬性。
• 相對定位 (relative) 允許元素相對於其原位置進行偏移。
• 絕對定位 (absolute) 使元素脫離文檔流，根據最接近的已定位父元素來定位。
• 固定定位 (fixed) 使元素相對於視窗進行定位，不會隨滾動條移動。
• 黏性定位 (sticky) 則會根據滾動條的位置改變定位方式。