CSS position 定位

CSS position

CSS position屬性用于指定一個元素在文檔中的定位方式。top，right，bottom 和 left 屬性則決定了該元素的最終位置。

常用文法

position: static | relative | absolute | sticky | fixed

預設值：static，沒有繼承性。

static

: 表示指定元素使用正常的布局行為。此時 top, right, bottom, left 和 z-index 屬性無效。

relative

: 相對定位的元素是在文檔中的正常位置偏移給定的值，但是不影響其他元素的偏移。

absolute

: 元素會被移出正常文檔流，絕對定位元素相對于最近的非 static 祖先元素定位。當這樣的祖先元素不存在時，則相對于ICB（inital container block, 初始包含塊）。

fixed

: 固定定位與絕對定位類似，隻不過固定定位相對于螢幕視口（viewport）的位置來指定元素位置。

sticky

: 粘性定位可以說是相對定位和固定定位的混合，相對它的最近滾動祖先（nearest scrolling ancestor）和 containing block (最近塊級祖先 nearest block-level ancestor)偏移。

相對定位

當一個元素設定為相對定位，而且同時設定

left

和

right

屬性值時，定位值遵循這麼一個規則：

當兩者都為auto時，定位置不起效果；當有一方auto時，以另一方為定位置；當兩者都不為auto時，優先

left

為定位置。

是以以下三條規則等效，并将方框向左移動1em：

div { position: relative; left: -1em; right: auto }
div { position: relative; left: auto; right: 1em }
div { position: relative; left: -1em; right: 5em }
           

絕對定位

絕對定位元素相對于最近的擁有 position 屬性但屬性值不是 static 的祖先元素定位。當這樣的祖先元素不存在時，則相對于ICB（inital container block, 初始包含塊，即 viewport 視口）

粘性定位

在 viewport 視口滾動到元素 top 距離小于 10px 之前，元素為相對定位。之後，元素将固定在與頂部距離 10px 的位置。

須指定 top, right, bottom 或 left 四個值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。

固定定位

在下面的示例中，元素始終定位在離頁面頂部 10px 的地方。

參考

https://www.w3.org/TR/2020/WD-css-position-3-20200519