z-index inaangalia mbele-nyuma ya mpangilio wa kubadiliana wa vipengele vya kuofautiana — maadili makubwa yanakaa juu. Lakini inafanya kazi tu kwenye vipengele vilivyoongezewa nafasi, na inafanya kazi ndani ya stacking context, ambayo ndilo chanzo cha kuchanganywa kwa z-index.
{ : fixed; : ; }
{ : fixed; : ; }
{ : relative; : ; }
z-index inasahauliwa kwenye position: static (chaguo-msingi) — kipengele lazima kiwe relative, absolute, fixed, au sticky ili ikabidhi.
Stacking context ni "tabaka" la kujitegemea. Maadili ya z-index yanashindana tu ndani ya muktadha sawa — mtoto hauwezi kamwe kusomeka kiwango cha stacking cha wazazi wake, bila kujali ni kiasi gani kile juu cha z-index wake.
.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). */
Hii ni hiyo "z-index yangu: 9999 modal bado iko nyuma ya kitu" kosa — modal imefungwa ndani ya wazazi ambaye uko katika tabaka la chini.
Sifa nyingi husambaza kimyakimya, ambayo inaweza kufunga watoto:
- 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 */
Kwa vitendo, tafsiri modals/tooltips juu ya DOM (React portals) ili ziwe haziwezi kufungwa katika wazazi wa chini.
Stacking contexts yaeleza makosa makubwa ya z-index: z-index kubwa ambayo bado inapoteza kwa sababu mazazi yake yako katika tabaka la chini.
Kujua kwamba opacity, transform, na z-index iliyoongezewa nafasi hujenga contexts — na kwamba watoto hauwezi kuacha yao — hukuruhusu kutafiti mpangilio wa overlays/dropdowns na kujenga DOM yako (portals) kwa usahihi.