z-index అనేది అతిక్రమించే elements ల front-to-back stacking క్రమాన్ని నియంత్రిస్తుంది — ఎక్కువ విలువలు పైన ఉంటాయి. కానీ ఇది positioned elements పై మాత్రమే పని చేస్తుంది, మరియు ఇది stacking context లో పనిచేస్తుంది, ఇది చాలా z-index困惑 యొక్క మూలం.
{ : fixed; : ; }
{ : fixed; : ; }
{ : relative; : ; }
z-index position: static (డిఫాల్ట్) పై వదిలివేయబడుతుంది — element relative, absolute, fixed, లేదా sticky ఉండాలి కాబట్టి ఇది వర్తిస్తుంది.
Stacking context ఒక స్వయంగా-అంతర్భాగం "layer." z-index విలువలు ఒకే context లో మాత్రమే పోటీ చేస్తాయి — ఒక child ఎప్పుడూ దాని parent యొక్క stacking స్థాయిని నుండి బయటపడదు, అది ఎంత ఎక్కువ z-index ఉన్నా.
.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). */
ఇది విలాసవంతమైన "my z-index: 9999 modal is still behind something" బగ్ — modal తక్కువ-layer parent లోపల చిక్కుకుపోయింది.
অনেక properties నిశ్శబ్దంగా ఒకటి సృష్టిస్తాయి, ఇది descendants ను చిక్కు చేయవచ్చు:
- 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 */
अभ్యాసంలో, DOM యొక్క శీర్షస్థానికి modals/tooltips రెండర్ చేయండి (React portals) కాబట్టి అవి తక్కువ-layer parent లో చిక్కుకుపోవు.
Stacking contexts అత్యంత అయోమయ z-index బగ్లను వివరిస్తాయి: ఒక భారీ z-index ఇప్పటికీ కోల్పోతుంది ఎందుకంటే దాని ancestor తక్కువ-layer పై ఉంది.
opacity, transform, మరియు positioned-z-index contexts సృష్టిస్తాయని తెలుసుకోవడం — మరియు children వాటిని పరిష్కరించలేవని — overlay/dropdown ordering డీబగ్ చేయడానికి మరియు మీ DOM (portals) సరిగా నిర్మించడానికి అనుమతిస్తుంది.