> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/web/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/web/css/stacking-context.md).

# Stacking Context

{% tabs %}
{% tab title="📗 參考" %}

* Josh ⟩ [What the heck, z-index??](https://www.joshwcomeau.com/css/stacking-contexts/) ⭐️⭐️⭐️
  {% endtab %}

{% tab title="📘 手冊" %}

* MDN ⟩ 
  * [The stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context#the_stacking_context)
  * [Using z-index](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Adding_z-index)
  * [Stacking without the z-index property](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_without_z-index)
  * [Stacking with floated blocks](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float)
* HTMLElement ⟩ [offsetParent](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/offsetParent) - closest **positioned** ancestor element
  {% endtab %}

{% tab title="🛠 工具" %}

* [Microsoft Edge](https://developer.microsoft.com/zh-tw/microsoft-edge/) ⟩ “[3D view](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/3d-view/)” - to **view** stacking contexts.
* **VSCode** extension ⟩ [CSS Stacking Contexts](https://marketplace.visualstudio.com/items?itemName=felixfbecker.css-stacking-contexts) - **highlight** stacking contexts.
* **Chrome** extension ⟩ 
  * [z-context](https://chrome.google.com/webstore/detail/z-context/jigamimbjojkdgnlldajknogfgncplbh) - add a “**z-index**” **pane** to **devtools**.
  * [CSS Stacking Context inspector](https://chrome.google.com/webstore/detail/css-stacking-context-insp/apjeljpachdcjkgnamgppgfkmddadcki) - add a "**stacking contexts**" panel to **DevTools**. ⭐️
    {% endtab %}

{% tab title="👥 相關" %}

* [Layout](/web/css/layout.md) ⟩ [Flexbox](/web/css/layout/display/flex/flex.md)
  {% endtab %}

{% tab title="💾 程式" %}

* replit ⟩ 
  * [stacking context](https://replit.com/@pegasusroe/stacking-context#style.css)
  * [stacking context with flex](https://replit.com/@pegasusroe/stacking-content-with-flex#style.css)
    {% endtab %}
    {% endtabs %}

{% hint style="warning" %}

* **Not** all **stacking contexts** use **positioned** layout. 👉 See: [Create Stacking Contexts](/web/css/stacking-context.md#create)
* **Not** all **positioned** elements create a **stacking context**.\
  (例如：只有 display: relative **沒有 z-index**)
  {% endhint %}

## Creating Stacking Contexts <a href="#create" id="create"></a>

* **:root** (<**html**>) - top-level stacking context
* **child** inside a **display**: **flex** | **grid** , with **z-index ≠ auto** ( ⭐️  even **static** children ❗️ )
* **position**: **relative** | **absolute**, with **z-index ≠ auto**&#x20;
* **position: fixed | sticky** ( ⭐️ **no z-index** needed ❗️)
* **opacity < 1**&#x20;
* **mix-blend-mode** ≠ **normal**
* **transform** | **filter** | **clip-path** | **perspective** | **mask** (value **≠ none**)
* **will-change**: **opacity** | **transform**&#x20;
* **contain**: **layout** | **paint**&#x20;
* **isolation**: **isolate** - explicitly creates a context

👉 See: 📘 MDN ⟩ [The stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context#the_stacking_context)

{% hint style="info" %}
**z-index** isn't purely a way to change an element's order, it's *also* a way to **form a group** around that **element's children**. z-index won't work unless a group is formed.\
📗 Josh ⟩ [What the heck, z-index?](https://www.joshwcomeau.com/css/stacking-contexts/#hold-on-a-minute)
{% endhint %}

## Order in a Stacking Context <a href="#order" id="order"></a>

All the elements **within a stacking context** are stacked in this order (from **back** to **front**):

{% hint style="info" %}
stacking order: **root** ⟩ ➖ ⟩ **static** ⟩ **auto** ⟩ ➕
{% endhint %}

* the **root element** of the stacking context
* **positioned** elements with a **negative z-index** (along with their children)
* non-positioned (**static**) elements
* **positioned** elements with a **z-index** of **auto** (and their children)
* **positioned** elements with a **positive z-index** (and their children)

{% hint style="warning" %}
Within [**flex**](https://developer.mozilla.org/en-US/docs/Web/CSS/flex) containers, when the [**order**](https://developer.mozilla.org/en-US/docs/Web/CSS/order) property alters rendering from the "order of appearance in the HTML" , it similarly affects the **order** for **stacking context**❗️
{% endhint %}

## Examples

{% tabs %}
{% tab title="screenshot" %}
![stacking contexts](/files/-MkXOKJ3tP5wcEGnMKX8)
{% endtab %}

{% tab title="codepen" %}
{% embed url="<https://codepen.io/lochiwei/pen/NWgExbe>" %}

{% endtab %}

{% tab title="📗 參考" %}

* MDN ⟩ Stacking Context ⟩ [example](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context#the_example)
  {% endtab %}
  {% endtabs %}

## Stacking without z-index <a href="#without-zindex" id="without-zindex"></a>

When the [`z-index`](https://developer.mozilla.org/en-US/docs/Web/CSS/z-index) property is **not specified** on any element, elements are stacked in the following order (from **bottom** to **top**):

{% hint style="info" %}
stacking order: **root** ⟩ **static block** ⟩ **float** ⟩ **static inline** ⟩ **positioned**
{% endhint %}

* **root** element's **background** and **borders**
* Descendant **static** **blocks** (in order of appearance in the HTML)
* **floating** blocks
* Descendant **static** **inline** elements
* Descendant **positioned** elements (in order of appearance in the HTML)

{% tabs %}
{% tab title="screenshot" %}
![stacking without z-index](/files/-MkXifqmvllgNmziMzWA)
{% endtab %}

{% tab title="codepen" %}
{% embed url="<https://codepen.io/lochiwei/pen/powQyxr>" %}

{% endtab %}

{% tab title="📗 參考" %}

* MDN ⟩ [Stacking with floated blocks](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/Stacking_and_float)
  {% endtab %}
  {% endtabs %}