Skip to main content

CSS Position 屬性介紹

Position 的用途​

在網頁中 position 的用途是設定「物件定位時所要的參考對像」，預設狀態下物件的位置是依據資料流來做排列，也就是跟隨資料做排列，如果對物件添加了不同的 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 設定位置。

  • 應用：蓋版廣告、光箱效果/light box、modal組件、「回到頁面頂端」的區塊

5. sticky（黏性定位）​

  • 結合 relative 和 fixed 的特性。

  • 預設定位在父層空間

  • 當視窗捲動到該物件位置時，會依據對該物件所設定的 top 值來讓該物件呈現 fixed 在視窗的效果(top是不可以省略的屬性)

  • 當物件呈現 fixed 效果時，其所能 fixed 的空間是該物件的父層空間

  • 當視窗往下捲到超過 sticky 物件的父層空間時， sticky 物件則不會再呈現 fixed 的效果，而是會被捲離視窗範圍。

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

注意事項​

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

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

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