🔰CSS positioning

CSS ⟩ layout ⟩ positioning

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

⭐️ 重點

• 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)

👥 相關

• coordinates of a Document / Element.

• coordinates of fixed elements are relative to the viewport.

• modal dialog

• Synth Keyboard

• .offsetParent of an HTMLElement