← Back to Blog

CSS Position 屬性：static, relative, absolute 與 fixed 的詳解

在 CSS 中，position 屬性用於指定元素的定位方式。它可以讓您將元素精確地放置在頁面的任何位置。position 屬性有五個主要的值：static、relative、absolute、fixed 和 sticky。

position: static

static 是 position 屬性的預設值。static 定位的元素會遵循正常的文檔流，top、right、bottom、left 和 z-index 屬性對其無效。

範例：

<div style="position: static; background-color: lightblue;">這是一個 static 定位的元素</div>

position: relative

relative 定位的元素會相對於其正常位置進行定位。您可以使用 top、right、bottom 和 left 屬性來移動它，但它原本在文檔流中所佔據的空間仍然會被保留。

範例：

<div style="position: relative; top: 20px; left: 20px; background-color: lightblue;">這是一個 relative 定位的元素</div>

position: absolute

absolute 定位的元素會完全脫離文檔流，並相對於其最近的非 static 定位的祖先元素進行定位。如果沒有這樣的祖先元素，它會相對於 <html> 元素進行定位。

範例：

<div style="position: relative; width: 200px; height: 200px; border: 1px solid black;">
  <div style="position: absolute; top: 20px; right: 20px; width: 100px; height: 100px; background-color: lightblue;">這是一個 absolute 定位的元素</div>
</div>

position: fixed

fixed 定位的元素會相對於瀏覽器視窗進行定位，即使頁面滾動，它也會保持在相同的位置。fixed 定位的元素也會脫離文檔流。

範例：

<div style="position: fixed; top: 20px; right: 20px; background-color: lightblue;">這是一個 fixed 定位的元素</div>

總結

position 值定位相對於脫離文檔流top, right, bottom, leftz-index
static正常文檔流否無效無效
relative自身正常位置否有效有效
absolute最近的非 static 祖先是有效有效
fixed瀏覽器視窗是有效有效