როგორ მუშაობს 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 */
```

პრაქტიკაში, რენდერ მოდალებს/tooltip-ებს DOM-ის თავში (React portals) ისე, რომ ისინი დაბალი ფენის მშობელში არ იყვნენ ღრმა.

## რატომ არის ეს მნიშვნელოვანი

Stacking contexts ხსნის z-index-ის ყველაზე გაუგებელ ბაგებს: უზარმაზარი z-index, რომელიც მაინც 失败ებს რადგან მისი ancestor დაბალ ფენაზე დგას.

იმის ცოდნა, რომ `opacity`, `transform` და positioned-z-index ქმნის კონტექსტებს — და რომ შვილებმა მათი შემოიერთება არ შეუძლიათ — გიხმარებთ overlay/dropdown დალაგების დებაგში და DOM-ის სწორად სტრუქტურირებაში (portals).