CSS Position 屬性介紹

CSS 的 position 屬性用來控制元素在頁面中的定位方式，常用於佈局設計。以下是五種主要的 position 值，以及它們的行為：

1. static（預設）

   • 元素按照正常的文檔流（normal flow）排列。

   • 不會受到 top、right、bottom、left 屬性的影響。

   • 這是 HTML 元素的預設定位方式。

2. relative（相對定位）

   • 元素相對於其原本位置進行偏移。

   • 使用 top、right、bottom、left 來調整位置，但元素仍保留在文檔流中，原本空間不會被其他元素佔據。

3. absolute（絕對定位）

   • 元素脫離文檔流，根據最近的非 static 定位的父元素（或 body）進行定位。

   • 使用 top、right、bottom、left 來設定具體位置。

   • 原來的位置會被其他元素填補。

4. fixed（固定定位）

   • 元素相對於瀏覽器視窗（viewport）定位，脫離文檔流。

   • 即使頁面滾動，元素位置也不會改變（例如導航欄固定在頂部）。

   • 使用 top、right、bottom、left 設定位置。

5. sticky（黏性定位）

   • 結合 relative 和 fixed 的特性。

   • 元素在正常文檔流中，直到滾動到指定位置（透過 top、right 等設定）時，變成固定定位。

   • 常用於製作「黏性」導航欄。

注意事項

• z-index：當元素重疊時，z-index 控制元素的堆疊順序，值越大越靠前。

• 父元素的定位：absolute 和 sticky 通常需要一個有 position: relative、absolute 或 fixed 的父元素作為參考。

• 脫離文檔流：absolute 和 fixed 會讓元素脫離文檔流，影響其他元素的佈局。

進階建議

• z-index：如果元素重疊，可以加 z-index: 10（例如在 fixed 或 absolute 元素上）來控制堆疊順序。

• 父容器：確保 absolute 元素的父容器有 position: relative 或其他非 static 定位，否則會相對於 body 定位。

• 實際應用：

  • fixed 常用於固定導航欄或浮動按鈕。

  • sticky 適合側邊欄或標題在滾動時保持可見。

  • absolute 常用於彈出視窗或覆蓋層。