Conas a oibríonn z-index agus comhthéacsanna stáca?

Question

Accepted Answer

`z-index` rialóitear an ord stáca **os-cúl** na n-eilimintí forleadaithe — suíonn luachanna níos airde ar bharr. Ach ní oibríonn sé ach ar eilimintí **a bhfuil seasamh orthu**, agus oibríonn sé *laistigh de* **chomhthéacs stáca**, ar é sin foinse an chuid is mó de bhruigín 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; }
```

Negnaítear `z-index` ar `position: static` (an réamhshocrú) — caithfidh an eilimint a bheith `relative`, `absolute`, `fixed`, nó `sticky` chun go n-oibreodh sé.

## Fíoraí an chás - an gealadh

Is "sraith" féin-fhulamhain a bhíonn i gcomhthéacs stáca. Níl luachanna `z-index` ag foluain ach **laistigh den chomhthéacs céanna** — ní féidir le páiste *riamh* éalú ó leibhéal stáca a thuismitheora, is cuma cé chomh hard is atá a 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). */
```

Is é seo an bugs clasaiceach "tá mo mhódal z-index: 9999 i gcónaí taobh thiar de rud éigin" — tá an mhódal gafa taobh istigh de thuismitheoir atá ar leibhéal níos íseal.

## Cad a chruthaíonn comhthéacs stáca nua

Cruthaíonn go leor airíonna ceann go ciúin, ar féidir leo dhescendants a ghealadh:

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

## An réiteach

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

Go praiticiúil, déan modála/tooltips a fhíorú ag an bharr den DOM (portálacha React) ionas nach mbeidh siad gafa in tuismitheor ar leibhéal níos íseal.

## Fíoraí an chás

Míníonn comhthéacsanna stáca na bugs z-index is midhealramhairc: z-index an-ard atá fós ag cailliúint toisc go bhfuil a sheanathair ar leibhéal níos íseal.

Bheith i bhfios agat go gcruthaíonn `opacity`, `transform`, agus z-index suite comhthéacsanna — agus nach féidir le páistí iad a bhraistint — cuireann sé ar do chumas botúin ord ofarlap/rogha thosaigh a bhreithniú agus do DOM (portálacha) a structúrú i gceart.