z-index ਅਤੇ stacking contexts ਕਿਵੇਂ ਕੰਮ ਕਰਦੇ ਹਨ?

Question

Accepted Answer

`z-index` ਅਵੇਰਲੈਪ ਹੋਣ ਵਾਲੇ ਐਲੀਮੈਂਟਸ ਦੀ **ਅਗਲੀ-ਪਿਛਲੀ** ਸਟੈਕਿੰਗ ਆਰਡਰ ਨੂੰ ਕੰਟਰੋਲ ਕਰਦਾ ਹੈ — ਉੱਚੇ ਮੁੱਲ ਸਭ ਤੋਂ ਉੱਪਰ ਬੈਠੇ ਹੁੰਦੇ ਹਨ। ਪਰ ਇਹ ਸਿਰਫ **positioned** ਐਲੀਮੈਂਟਸ ਉੱਤੇ ਕੰਮ ਕਰਦਾ ਹੈ, ਅਤੇ ਇਹ ਇੱਕ **stacking context** *ਦੇ ਅੰਦਰ* ਕੰਮ ਕਰਦਾ ਹੈ, ਜੋ ਜ਼ਿਆਦਾਤਰ z-index ਉਲਝਣ ਦਾ ਸਰੋਤ ਹੈ।

```css
.modal   { position: fixed; z-index: 100; }   /* on top */
.overlay { position: fixed; z-index: 99; }    /* just below */
.content { position: relative; z-index: 1; }
```

`z-index` ਨੂੰ `position: static` (ਡਿਫਾਲਟ) ਉੱਤੇ **ਅਣਗੋਲਿਆ ਜਾਂਦਾ ਹੈ** — ਐਲੀਮੈਂਟ ਨੂੰ ਇਹ ਲਾਗੂ ਕਰਨ ਲਈ `relative`, `absolute`, `fixed`, ਜਾਂ `sticky` ਹੋਣਾ ਚਾਹੀਦਾ ਹੈ।

## Stacking contexts — ਮੁਸ਼ਕਲ

ਇੱਕ stacking context ਇੱਕ ਸੁਤੰਤਰ "ਪਰਤ" ਹੈ। `z-index` ਮੁੱਲ ਸਿਰਫ **ਇੱਕ ਜੋ ਸਰਬੱਤ** ਦੇ ਅੰਦਰ ਪ್ਰਤਿਸਪਰਧਾ ਕਰਦੇ ਹਨ — ਇੱਕ ਬੱਚਾ ਕਦੀ ਵੀ ਆਪਣੇ ਮਾਤਾ-ਪਿਤਾ ਦੇ ਸਟੈਕਿੰਗ ਪੱਧਰ ਤੋਂ ਨਹੀਂ ਨਿਕਲ ਸਕਦਾ, ਭਾਵੇਂ ਉਹ z-index ਕਿੰਨਾ ਵੀ ਉੱਚਾ ਹੋ।

```css
.parent-a { position: relative; z-index: 1; }
.parent-b { position: relative; z-index: 2; }

.child-of-a { position: absolute; z-index: 9999; }
/* ❌ child-of-a STILL renders below everything in parent-b, */
/*    because parent-a (z-index 1) is entirely below parent-b (z-index 2). */
```

ਇਹ ਕਲਾਸਿਕ "ਮੇਰਾ z-index: 9999 modal ਅਜੇ ਵੀ ਕੁਝ ਪਿੱਛੇ ਹੈ" ਬਗ ਹੈ — modal ਇੱਕ ਮਾਤਾ-ਪਿਤਾ ਵਿੱਚ ਫਸਿਆ ਹੋਇਆ ਹੈ ਜੋ ਇੱਕ ਘੱਟ ਪਰਤ ਉੱਤੇ ਹੈ।

## ਕੀ ਨਵੀਂ stacking context ਬਣਾਉਂਦਾ ਹੈ

ਕਈ ਗੁਣ ਖਾਮੋਸ਼ੀ ਨਾਲ ਇੱਕ ਬਣਾਉਂਦੇ ਹਨ, ਜੋ ਪ੍ਰਵੰਸਕੇ ਨੂੰ ਫਸਾ ਸਕਦੇ ਹਨ:

```text
- position + z-index (other than auto)
- opacity less than 1
- transform, filter, will-change
- isolation: isolate
- a flex/grid item with z-index
```

## ਸੁਲਝਾਉ

```css
/* render the modal at the document root (outside trapping parents) — "portal" */
.isolated { isolation: isolate; } /* deliberately create a context where you want one */
```

ਅਮਲ ਵਿੱਚ, modals/tooltips ਨੂੰ DOM ਦੇ ਸਭ ਤੋਂ ਉੱਪਰ ਰੈਂਡਰ ਕਰੋ (React portals) ਤਾਂ ਜੋ ਉਹ ਇੱਕ ਘੱਟ-ਪਰਤ ਮਾਤਾ-ਪਿਤਾ ਵਿੱਚ ਫਸਿਆ ਨਾ ਹੋ।

## ਇਹ ਕਿਉਂ ਮਹੱਤਵਪੂਰਨ ਹੈ

Stacking contexts ਸਭ ਤੋਂ ਉਲਝਣ ਵਾਲੀਆਂ z-index ਬਗਜ਼ ਦੀ ਵਿਆਖਿਆ ਕਰਦਾ ਹੈ: ਇੱਕ ਵਿਸ਼ਾਲ z-index ਜੋ ਅਜੇ ਵੀ ਹਾਰ ਜਾਂਦਾ ਹੈ ਕਿਉਂਕਿ ਇਸ ਦਾ ਅਗਾਬਤ ਇੱਕ ਘੱਟ ਪਰਤ ਉੱਤੇ ਹੈ।

ਇਹ ਜਾਣਕਾਰੀ ਕਿ `opacity`, `transform`, ਅਤੇ positioned-z-index contexts ਬਣਾਉਂਦੇ ਹਨ — ਅਤੇ ਬੱਚਿਆਂ ਉਨ੍ਹਾਂ ਤੋਂ ਨਿਕਲ ਨਹੀਂ ਸਕਦੇ — ਤੁਹਾਨੂੰ overlay/dropdown ਆਰਡਰਿੰਗ ਨੂੰ ਡੀਬਗ ਕਰਨ ਅਤੇ ਆਪਣੇ DOM (portals) ਨੂੰ ਸਹੀ ਢੰਗ ਨਾਲ ਢਾਂਚਾ ਦੇਣ ਦਿੰਦਾ ਹੈ।