Si funksionon z-index dhe kontekstet e stack?

Question

Accepted Answer

`z-index` kontrollon rendin e **perputhjes paraprirë-mbrapa** të elementeve të mbivendosur — vlerat më të larta qëndrojnë në krye. Por funksionon vetëm në elementet **të pozicionuar**, dhe vepron *brenda* **kontekstit të stack**, i cili është burimi i shumicës së konfuzionit me 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` **injorohet** në `position: static` (parazgjedhja) — elementi duhet të jetë `relative`, `absolute`, `fixed`, ose `sticky` që të zbatohet.

## Kontekstet e stack — prangat

Një kontekst i stack është një "shtresë" e vetë-përmbajtjes. Vlerat e `z-index` konkurruar vetëm **në të njëjtin kontekst** — një fëmijë nuk mund të arratisej nivelit të stack-it të prindërit, sado sa i lartë të jetë z-index-i i tij.

```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). */
```

Kjo është gabimi klasik "z-index-i im: 9999 modal është ende mbrapa diçkaje" — modali është i bllokuar brenda prindërit që është në një shtresë më të ulët.

## Çfarë krijon një kontekst të ri të stack

Mnumë veti e krijojnë atë në heshtje, që mund t'i bllokojë pasardhësit:

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

## Zgjidhja

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

Në praktikë, vizatoni modalet/këshillat në krye të DOM (React portale) në mënyrë që të mos jenë të bllokuar në një prind me shtresë të ulët.

## Pse është e rëndësishme

Kontekstet e stack shpjegojnë gabimet më të ngatërruar të z-index: një z-index shumë i lartë që ende humb sepse paraardhësi i tij është në një shtresë më të ulët.

Dija se `opacity`, `transform`, dhe z-index i pozicionuar krijojnë kontekste — dhe se fëmijët nuk mund të arratisjen ato — ju lejon të diagnostikoni rendin e mbivendosit/dropdown-it dhe të strukturoni DOM-in (portalat) siç duhet.