# Stacking Context

{% tabs %}
{% tab title="📗 參考" %}
* Josh ⟩ [What the heck, z-index??](https://www.joshwcomeau.com/css/stacking-contexts/) ⭐️⭐️⭐️
{% endtab %}

{% tab title="📘 手冊" %}
* MDN ⟩&#x20;
  * [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 ⟩&#x20;
  * [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](layout) ⟩ [Flexbox](layout/display/flex/flex)
{% endtab %}

{% tab title="💾 程式" %}
* replit ⟩&#x20;
  * [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](#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](https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfvEFZnSBhKT6fJmus0%2F-MkXMkIf7GqVXWrs5xTF%2F-MkXOKJ3tP5wcEGnMKX8%2Fstacking%20contexts.png?alt=media\&token=aee1344b-969a-4572-96c1-4316aff3a8d0)
{% 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](https://2527454625-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MfvEFZnSBhKT6fJmus0%2F-MkXTe6d4zBPSLVsehim%2F-MkXifqmvllgNmziMzWA%2Fstacking%20without%20z-index.png?alt=media\&token=80caa5a8-e9d9-4b78-b15a-e60d068df2b0)
{% 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 %}
