Πώς λειτουργούν το 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` ανταγωνίζονται μόνο **εντός του ίδιου context** — ένα παιδί δεν μπορεί ποτέ να ξεφύγει από το επίπεδο στοίβασης του γονέα του, ανεξάρτητα από το πόσο υψηλό είναι το 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). */
```

Αυτό είναι το κλασικό σφάλμα "το modal μου με z-index: 9999 είναι ακόμα πίσω από κάτι" — το 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).