z-index اور stacking contexts کیسے کام کرتے ہیں؟

Question

Accepted Answer

`z-index` overlapping elements کی **front-to-back** stacking order کو کنٹرول کرتا ہے — اعلیٰ values اوپر بیٹھتی ہیں۔ لیکن یہ صرف **positioned** elements پر کام کرتا ہے، اور یہ **stacking context** کے *اندر* کام کرتا ہے، جو زیادہ تر z-index confusion کا ذریعہ ہے۔

```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` (default) پر **نظر انداز** کیا جاتا ہے — element کو `relative`, `absolute`, `fixed`, یا `sticky` ہونا ضروری ہے تاکہ یہ لاگو ہو۔

## Stacking contexts — gotcha

ایک stacking context ایک self-contained "layer" ہے۔ `z-index` values صرف **ایک ہی context کے اندر** compete کرتی ہیں — ایک child اپنے parent کی stacking level سے *کبھی* نہیں نکل سکتا، چاہے اس کا 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). */
```

yہ classic "میرا z-index: 9999 modal ابھی بھی کچھ چیز کے پیچھے ہے" bug ہے — modal ایک parent کے اندر پھنسا ہوا ہے جو ایک lower layer پر ہے۔

## کیا نیا stacking context بناتا ہے

بہت سی properties خاموشی سے ایک بناتی ہیں، جو descendants کو پھنسا سکتی ہیں:

```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 کے top پر render کریں (React portals) تاکہ وہ low-layer parent میں پھنسے نہ رہیں۔

## یہ کیوں اہم ہے

Stacking contexts سب سے زیادہ الجھن والے z-index bugs کی وضاحت کرتے ہیں: ایک بہت بڑا z-index جو ابھی بھی ہار جاتا ہے کیونکہ اس کا ancestor ایک lower layer پر ہے۔

یہ جاننا کہ `opacity`, `transform`, اور positioned-z-index contexts بناتے ہیں — اور یہ کہ children ان سے نہیں نکل سکتے — آپ کو overlay/dropdown ordering کو debug کرنے اور اپنے DOM (portals) کو صحیح طریقے سے structure کرنے دیتا ہے۔