# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://lochiwei.gitbook.io/web/css/stacking-context.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.