Quick overview of stacking context

Tue Sep 24 2024•1 min read

browser rendering stacking context CSS

Stacking context 決定元素在 z 軸上的排序，常見創建 stacking context 情況：

根元素 <html>
position: absolute
position: fixed
position: sticky
position: relative 且 z-index 值不為 auto
opacity 小於 1
transform, scale, rotate
Flex-item, 且 z-index 不為 auto
Grid-item, 且 z-index 不為 auto
will-change 不為初始值

規則：

根元素 <html> 自動形成 stacking context，其子元素則根據特定屬性，形成新的 stacking context
在同一個 stacking context 內，使用 z-index 值進行比較，較大的 z-index 在上方，值相同則按照的出現順序排列 (後者在上方)
Stacking context 內部的元素，不會影響到其外部的 stacking context，反之外部 stacking context 的元素，也不會影響到內部的 stacking context（適當隔離，可以減少 reflow 及 repaint 的次數）

With a basic example

<html>
  <body>
    <header style="position: sticky; z-index: 100;">
      <h1>Title</h1>
    </header>
    <section>
      <h2>First section</h2>
      <div>Item 1</div>
      <div>Item 2</div>
    </section>
    <section style="position: absolute;">
      <h2>Second section</h2>
      <div>Item 1</div>
      <div>Item 2</div>
    </section>
  </body>
</html>

References