🔹position

╱🚧 under construction

CSS ⟩ layout ⟩ position

設定了 position 的元素稱為定位元素 (positioned element) 。

• relative：提供子元素新的參考座標，但自己位置不變。

• absolute：參考最近定位父元素，將自己定位在絕對位置上。

• fixed：

• sticky：

• static：

"position"   "top/left" relative to               removed from flow
-----------------------------------------------------------------------
fixed        `viewport`                                  ✅ 
relative     where it should be                          ❌ 
absolute     `document` / nearest positioned parent      ✅ 

⭐️ 重點

• static 是預設屬性，不會被子元素視為是「定位父元素」 。

• By default, any positioned element appears in front of any non-positioned elements.

• coordinates of fixed elements are relative to the viewport.

• coordinates of absolutely positioned elements are relative to the document.

If none of the absolutely positioned element’s ancestors are positioned, then the element will be positioned based on the initial containing block - an area with dimensions equal to the viewport size, anchored at the top of the page.

By setting top/bottom, left/right , you also implicitly define the width / height of the (fixed and absolutely, but not relatively positioned) element.

Unlike fixed and absolute positioning, you cannot use top/bottom, left/right to change the size of a relatively positioned element.

• can use top or bottom, but not both (bottom will be ignored).

• can use left or right, but not both (right will be ignored).

z-index

• z-index only works on positioned elements.

• applying a z-index to a positioned element establishes a stacking context.

• Elements with a negative z-index appear behind static elements.

📘 手冊

• inset - shortcut for top, right, bottom, left

• CSS ⟩ Understanding CSS z-index

📗 參考

• CSSTricks ⟩ inset

• JavaScript: The Definitive Guide (15.5 Document Geometry & Scrolling)

• ChatGPT ⟩ 學習 CSS 排版

👥 相關

• position: absolute 的定位子元素，它的 top, bottom, left, right 是相對於自己的最近定位父元素的。

• coordinates of a Document / Element.

• coordinates of fixed elements are relative to the viewport.

• modal dialog

• Synth Keyboard

• .offsetParent of an HTMLElement

• tooltip 利用 position 來定位