z-index અને stacking contexts કેવી રીતે કામ કરે છે?

Question

Accepted Answer

`z-index` ઓવરલેપિંગ તત્વોના **આગળ-પાછળ** સ્ટેકિંગ ક્રમને નિયંત્રિત કરે છે — ઉચ્ચ મૂલ્યો ઉપર બેઠા હોય છે. પરંતુ તે માત્ર **સ્થિત** તત્વો પર કાર્ય કરે છે, અને તે **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 મોડલ હજુ પણ કંઈક પાછળ છે" બગ — મોડલ પેરેન્ટ અંદર ફસાયેલો છે જે નીચલી લેયર પર છે.

## નવો 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 */
```

વ્યવહારમાં, મોડલ્સ/ટૂલટિપ્સ DOM ના ટોચ પર રેન્ડર કરો (React portals) જેથી તેઓ નીચલી-લેયર પેરેન્ટમાં ફસાયેલા ન હોય.

## શા માટે તે મહત્વપૂર્ણ છે

Stacking contexts સૌથી મોહક z-index બગ્સને સમજાવે છે: એક વિશાળ z-index જે હજુ પણ હારે છે કારણ કે તેનો પૂર્વજ નીચલી લેયર પર છે.

જાણતા હતા કે `opacity`, `transform`, અને positioned-z-index contexts બનાવે છે — અને તે બાળકો તેમાંથી બચી શકતા નથી — તમને overlay/dropdown ક્રમમાં ડીબગ કરવા અને તમારો DOM (portals) યોગ્ય રીતે સ્ટ્રક્ચર કરવા દેશે.