z-index yana sarrafa gida-bayan tsarin tsaka na abubuwan da ke mamaye — ƙananan ƙimamai suna jiya a gida. Amma ya ke aiki kawai a kan abubuwan da aka shimfiɗa, kuma yana aiki a cikin stacking context, wanda shine tushen yawancin azancin z-index.
{ : fixed; : ; }
{ : fixed; : ; }
{ : relative; : ; }
z-index yana watsi da position: static (taunawa) — abin takaici dole ne a zama relative, absolute, fixed, ko sticky don ya aiki.
Stacking context shine "sosai" mai kansa. Ƙimamai z-index suna ƙwarewa a cikin jiya iri daya — yaro ba zai iya tashi daga matsayin tsaka na uwarensa ba, duk da kowane tsabar z-index ce.
.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). */
Wannan shine lahani na gida na "z-index: 9999 na akwai suna jiya komai ba" — modal ta tsinci a cikin uwar da ke kan waje ƙananan.
Kasuwa da yawa suna ƙirƙira daya shiru, wanda zai iya tsinca zuriya:
- 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 */
A zahiri, fitar modals/tooltips a saman DOM (React portals) domin ba su ku tsinci a cikin uwar ƙananan.
Stacking contexts suna bayyana lahani na z-index mafi ƙaulace: z-index mai girma da ya samu komai saboda uwarensa ke kan ƙananan waje.
Sanin cewa opacity, transform, da z-index na shimfiɗa suna ƙirƙira contexts — kuma yaro ba za su iya gudu daga su ba — yana ba ka ikon gani lahani na overlay/dropdown jimlah da tsara DOM (portals) daidai.