z-index jikkontrolla l-ordni ta' stacking minn quddiem għal wara ta' elementi li jikkoinċidu — valuri ogħla jilqgħu fuq. Imma jaħdem biss fuq elementi positioned, u jaħdem ġewwa stacking context, li huwa s-sors tal-ħafna mill-konfużjoni ta' z-index.
{ : fixed; : ; }
{ : fixed; : ; }
{ : relative; : ; }
z-index huwa injorat fuq position: static (il-default) — l-element għandu jkun relative, absolute, fixed, jew sticky biex japplika.
Stacking context huwa "layer" indipendenti. Valuri ta' z-index jikkompetu biss ġewwa l-istess context — iben qatt ma jista' jeħel mill-livell ta' stacking tal-ħamituwt, kemm kien għoli z-index tiegħu.
.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). */
Dan huwa l-klassiku "il-modal z-index: 9999 tiegħi għadu waħlu ta' ħadd ħaġa oħra" bug — il-modal tkun qiesgħa ġewwa parent li jkun fuq layer aktar baxxa.
Minn propjetajiet oħra, ħafna jinħolqu waħdu, li jista' jqarraq d-dixxendenti:
- position + z-index (other than auto)
- opacity less than 1
- transform, filter, will-change
- isolation: isolate
- a flex/grid item with z-index
/* render the modal at the document root (outside trapping parents) — "portal" */
.isolated { isolation: isolate; } /* deliberately create a context where you want one */
Fil-prattika, render modals/tooltips fil-quċċ tal-DOM (React portals) sabiex ma jkunux qiesgħa ġewwa parent fuq layer aktar baxxa.
Stacking contexts jispjegaw il-bugs ta' z-index l-aktar konfużi: z-index enormi li għadu jtellgħa għax l-antennat tiegħu jkunu fuq layer aktar baxxa.
Il-għarfien li opacity, transform, u positioned-z-index jinħolqu contexts — u li t-tfal ma jistgħux jeħlu minnhom — jegħlek tidebbug ta' overlay/dropdown ordering u tikkonċerna l-istruttura tiegħek DOM (portals) kif suppost.