మీరు ఎప్పుడైనా మీ CSSలోని మూలకంపై z-ఇండెక్స్: 99999ని సెట్ చేసారా మరియు అది ఇతర ఎలిమెంట్ల కంటే పైకి రాలేదా? అన్ని విభిన్న మూలకాలు తక్కువ విలువతో సెట్ చేయబడినా లేదా అస్సలు సెట్ చేయబడనట్లు భావించి, ఆ మూలకాన్ని దృశ్యమానంగా ఏదైనా దాని పైన సులభంగా ఉంచే పెద్ద విలువ. వెబ్పేజీ సాధారణంగా రెండు డైమెన్షనల్ స్పేస్లో సూచించబడుతుంది; అయినప్పటికీ, నిర్దిష్ట CSS లక్షణాలను వర్తింపజేయడం ద్వారా, లోతును తెలియజేయడానికి ఒక ఊహాత్మక z-యాక్సిస్ ప్లేన్ ప్రవేశపెట్టబడింది. ఈ విమానం స్క్రీన్కు లంబంగా ఉంటుంది మరియు దాని నుండి, వినియోగదారు మూలకాల క్రమాన్ని ఒకదానిపై ఒకటి గ్రహిస్తారు. ఊహాత్మక z-అక్షం వెనుక ఉన్న ఆలోచన, పేర్చబడిన మూలకాల గురించి వినియోగదారు యొక్క అవగాహన, దానిని సృష్టించే CSS లక్షణాలు కలిసి మనం స్టాకింగ్ సందర్భం అని పిలుస్తాము. మేము వెబ్పేజీలో ఎలిమెంట్స్ ఎలా "స్టాక్" చేయబడతాయి, స్టాకింగ్ క్రమాన్ని ఏది నియంత్రిస్తుంది మరియు అవసరమైనప్పుడు ఎలిమెంట్లను "అన్స్టాక్" చేయడానికి ఆచరణాత్మక విధానాల గురించి మాట్లాడబోతున్నాము. స్టాకింగ్ సందర్భాలు గురించి మీ వెబ్పేజీని డెస్క్గా ఊహించుకోండి. మీరు HTML మూలకాలను జోడించినప్పుడు, మీరు డెస్క్పై ఒకదాని తర్వాత ఒకటి కాగితపు ముక్కలను వేస్తున్నారు. ఉంచిన చివరి కాగితం ముక్క ఇటీవల జోడించిన HTML మూలకానికి సమానంగా ఉంటుంది మరియు దాని ముందు ఉంచిన అన్ని ఇతర పేపర్ల పైన ఇది ఉంటుంది. సమూహ మూలకాల కోసం కూడా ఇది సాధారణ పత్రం ప్రవాహం. డెస్క్ అన్ని ఇతర ఫోల్డర్లను కలిగి ఉన్న మూలకం ద్వారా ఏర్పడిన రూట్ స్టాకింగ్ సందర్భాన్ని సూచిస్తుంది. ఇప్పుడు, నిర్దిష్ట CSS లక్షణాలు అమలులోకి వస్తాయి. స్థానం (z-ఇండెక్స్తో), అస్పష్టత, రూపాంతరం మరియు కలిగి ఉండటం వంటి లక్షణాలు ఫోల్డర్లా పనిచేస్తాయి. ఈ ఫోల్డర్ ఒక మూలకం మరియు దాని పిల్లలందరినీ తీసుకుంటుంది, వాటిని ప్రధాన స్టాక్ నుండి సంగ్రహిస్తుంది మరియు వాటిని ప్రత్యేక సబ్-స్టాక్గా సమూహపరుస్తుంది, మేము స్టాకింగ్ సందర్భం అని పిలుస్తాము. స్థాన మూలకాల కోసం, మేము ఆటో కాకుండా z-ఇండెక్స్ విలువను ప్రకటించినప్పుడు ఇది జరుగుతుంది. అస్పష్టత, రూపాంతరం మరియు ఫిల్టర్ వంటి లక్షణాల కోసం, నిర్దిష్ట విలువలను వర్తింపజేసినప్పుడు స్టాకింగ్ సందర్భం స్వయంచాలకంగా సృష్టించబడుతుంది.
దీన్ని అర్థం చేసుకోవడానికి ప్రయత్నించండి: ఒకసారి కాగితం ముక్క (అంటే, పిల్లల మూలకం) ఫోల్డర్లో ఉంటే (అంటే, పేరెంట్ స్టాకింగ్ సందర్భం), అది ఆ ఫోల్డర్ నుండి నిష్క్రమించదు లేదా వేరే ఫోల్డర్లోని పేపర్ల మధ్య ఉంచబడదు. దాని z-ఇండెక్స్ ఇప్పుడు దాని స్వంత ఫోల్డర్లో మాత్రమే సంబంధితంగా ఉంది.
దిగువ ఉదాహరణలో, పేపర్ B ఇప్పుడు ఫోల్డర్ B యొక్క స్టాకింగ్ సందర్భంలో ఉంది మరియు ఫోల్డర్లోని ఇతర పేపర్లతో మాత్రమే ఆర్డర్ చేయబడుతుంది.
మీరు కోరుకుంటే, మీ డెస్క్పై రెండు ఫోల్డర్లు ఉన్నాయని ఊహించుకోండి:
.folder-a {z-index: 1; } .ఫోల్డర్-బి {z-ఇండెక్స్: 2; }
మార్కప్ని కొంచెం అప్డేట్ చేద్దాం. ఫోల్డర్ లోపల A అనేది ఒక ప్రత్యేక పేజీ, z-ఇండెక్స్: 9999. లోపల ఫోల్డర్ B అనేది సాదా పేజీ, z-ఇండెక్స్: 5.
.special-page {z-index: 9999; } .plain-page {z-index: 5; }
ఏ పేజీ పైన ఉంది? ఇది ఫోల్డర్ Bలోని .plain-page. బ్రౌజర్ చైల్డ్ పేపర్లను విస్మరిస్తుంది మరియు ముందుగా రెండు ఫోల్డర్లను స్టాక్ చేస్తుంది. ఇది ఫోల్డర్ B (z-index: 2)ని చూస్తుంది మరియు దానిని ఫోల్డర్ A (z-index: 1) పైన ఉంచుతుంది ఎందుకంటే ఒకటి కంటే రెండు ఎక్కువ అని మనకు తెలుసు. ఇంతలో, .special-page సెట్ z-index: 9999 పేజీ దాని z-ఇండెక్స్ అత్యధిక సాధ్యమైన విలువకు సెట్ చేయబడినప్పటికీ స్టాక్ దిగువన ఉంది. స్టాకింగ్ సందర్భాలను కూడా గూడులో ఉంచవచ్చు (ఫోల్డర్ల లోపల ఫోల్డర్లు), “కుటుంబ వృక్షాన్ని” సృష్టించడం. అదే సూత్రం వర్తిస్తుంది: పిల్లవాడు తన తల్లిదండ్రుల ఫోల్డర్ నుండి ఎప్పటికీ తప్పించుకోలేడు. లేయర్లను సమూహపరిచే మరియు క్రమాన్ని మార్చే ఫోల్డర్ల వలె స్టాకింగ్ సందర్భాలు ఎలా ప్రవర్తిస్తాయో ఇప్పుడు మీరు తెలుసుకున్నారు, ఇది అడగడం విలువైనదే: కొన్ని లక్షణాలు - రూపాంతరం మరియు అస్పష్టత వంటివి - ఎందుకు కొత్త స్టాకింగ్ సందర్భాలను సృష్టిస్తాయి? ఇక్కడ విషయం ఏమిటంటే: ఈ లక్షణాలు స్టాకింగ్ సందర్భాలను సృష్టించవు ఎందుకంటే అవి ఎలా కనిపిస్తాయి; హుడ్ కింద బ్రౌజర్ ఎలా పనిచేస్తుందనే కారణంగా వారు దీన్ని చేస్తారు. మీరు రూపాంతరం, అస్పష్టత, ఫిల్టర్ లేదా దృక్పథాన్ని వర్తింపజేసినప్పుడు, మీరు బ్రౌజర్కి ఇలా చెప్తున్నారు, “హే, ఈ మూలకం కదలవచ్చు, తిప్పవచ్చు లేదా ఫేడ్ కావచ్చు, కాబట్టి సిద్ధంగా ఉండండి!”
మీరు ఈ లక్షణాలను ఉపయోగించినప్పుడు, రెండరింగ్ను మరింత సమర్థవంతంగా నిర్వహించడానికి బ్రౌజర్ కొత్త స్టాకింగ్ సందర్భాన్ని సృష్టిస్తుంది. ఇది యానిమేషన్లు, ట్రాన్స్ఫార్మ్లు మరియు విజువల్ ఎఫెక్ట్లను స్వతంత్రంగా నిర్వహించడానికి బ్రౌజర్ని అనుమతిస్తుంది, ఈ ఎలిమెంట్స్ మిగిలిన పేజీతో ఎలా ఇంటరాక్ట్ అవుతాయో మళ్లీ లెక్కించాల్సిన అవసరాన్ని తగ్గిస్తుంది. "నేను ఈ ఫోల్డర్ని విడిగా నిర్వహిస్తాను కాబట్టి దానిలోని ఏదైనా మార్పు వచ్చిన ప్రతిసారీ నేను మొత్తం డెస్క్ని రీషఫ్ల్ చేయనవసరం లేదు" అని బ్రౌజర్ చెబుతున్నట్లుగా భావించండి. కానీ ఉందిఒక దుష్ప్రభావం. బ్రౌజర్ దాని స్వంత లేయర్లోకి ఒక మూలకాన్ని ఎత్తిన తర్వాత, అది తప్పనిసరిగా దానిలోని ప్రతిదాన్ని "చదునుగా" చేసి, కొత్త స్టాకింగ్ సందర్భాన్ని సృష్టిస్తుంది. ఇది ప్రత్యేకంగా నిర్వహించడానికి ఫోల్డర్ను డెస్క్ నుండి తీసివేసినట్లు ఉంటుంది; ఆ ఫోల్డర్లోని ప్రతి ఒక్కటి సమూహం చేయబడుతుంది మరియు బ్రౌజర్ ఇప్పుడు దేని పైన కూర్చుందో నిర్ణయించేటప్పుడు దానిని ఒకే యూనిట్గా పరిగణిస్తుంది. కాబట్టి రూపాంతరం మరియు అస్పష్టత లక్షణాలు దృశ్యమానంగా పేర్చబడిన అంశాలను ప్రభావితం చేయనప్పటికీ, అవి పని చేస్తాయి మరియు ఇది పనితీరు ఆప్టిమైజేషన్ కోసం. ఇలాంటి కారణాల వల్ల అనేక ఇతర CSS లక్షణాలు స్టాకింగ్ సందర్భాలను కూడా సృష్టించగలవు. మీరు లోతుగా తీయాలనుకుంటే MDN పూర్తి జాబితాను అందిస్తుంది. చాలా కొన్ని ఉన్నాయి, ఇది తెలియకుండానే అనుకోకుండా స్టాకింగ్ సందర్భాన్ని సృష్టించడం ఎంత సులభమో వివరిస్తుంది. "అన్స్టాకింగ్" సమస్య స్టాకింగ్ సమస్యలు అనేక కారణాల వల్ల ఉత్పన్నమవుతాయి, అయితే కొన్ని ఇతరులకన్నా ఎక్కువగా ఉంటాయి. మోడల్ కాంపోనెంట్లు ఒక క్లాసిక్ ప్యాటర్న్, ఎందుకంటే వాటికి అన్ని ఇతర ఎలిమెంట్ల కంటే పై లేయర్లో కాంపోనెంట్ను "ఓపెన్" చేయడానికి టోగుల్ చేయడం అవసరం, ఆపై అది "మూసివేయబడినప్పుడు" పై లేయర్ నుండి తీసివేయడం అవసరం. మనమందరం ఒక మోడల్ను తెరిచే పరిస్థితికి వచ్చామని మరియు ఏ కారణం చేతనైనా అది కనిపించదని నాకు చాలా నమ్మకంగా ఉంది. ఇది సరిగ్గా తెరవబడలేదని కాదు, కానీ అది స్టాకింగ్ సందర్భం యొక్క దిగువ పొరలో వీక్షించబడదు. ఇది "ఎలా వచ్చింది?" అని మీరు ఆశ్చర్యపోయేలా చేస్తుంది. మీరు సెట్ చేసినప్పటి నుండి:
.ఓవర్లే { స్థానం: స్థిర; /* స్టాకింగ్ సందర్భాన్ని సృష్టిస్తుంది */ z-సూచిక: 1; /* ఎలిమెంట్ను అన్నిటికీ పైన ఒక పొరపై ఉంచుతుంది */ ఇన్సెట్: 0; వెడల్పు: 100%; ఎత్తు: 100vh; పొంగి: దాచిన; నేపథ్య రంగు: #00000080; }
ఇది సరిగ్గానే కనిపిస్తోంది, అయితే మోడల్ ట్రిగ్గర్ను కలిగి ఉన్న పేరెంట్ ఎలిమెంట్ మరొక పేరెంట్ ఎలిమెంట్లోని చైల్డ్ ఎలిమెంట్ అయితే అది కూడా z-ఇండెక్స్: 1కి సెట్ చేయబడుతుంది, అది సాంకేతికంగా మోడల్ను ప్రధాన ఫోల్డర్ ద్వారా అస్పష్టంగా ఉన్న సబ్లేయర్లో ఉంచుతుంది. ఆ నిర్దిష్ట దృశ్యం మరియు ఇతర సాధారణ స్టాకింగ్-సందర్భ ఆపదలను చూద్దాం. అనుకోకుండా స్టాకింగ్ సందర్భాలను సృష్టించడం ఎంత సులభమో మాత్రమే కాకుండా వాటిని ఎలా తప్పుగా నిర్వహించాలో కూడా మీరు చూస్తారని నేను భావిస్తున్నాను. అలాగే, మీరు నిర్వహించబడే స్థితికి ఎలా తిరిగి వస్తారో పరిస్థితిపై ఆధారపడి ఉంటుంది. దృశ్యం 1: ట్రాప్డ్ మోడల్
మీరు వెంటనే మీ మోడల్ తక్కువ-స్థాయి లేయర్లో చిక్కుకున్నట్లు చూడవచ్చు మరియు తల్లిదండ్రులను గుర్తించవచ్చు. బ్రౌజర్ పొడిగింపులు స్మార్ట్ డెవలపర్లు సహాయం చేయడానికి పొడిగింపులను నిర్మించారు. ఈ “CSS స్టాకింగ్ కాంటెక్స్ట్ ఇన్స్పెక్టర్” Chrome పొడిగింపు వంటి సాధనాలు స్టాకింగ్ సందర్భాన్ని సృష్టించే అంశాల గురించి మీకు సమాచారాన్ని చూపించడానికి మీ DevToolsకి అదనపు z-ఇండెక్స్ ట్యాబ్ను జోడిస్తాయి.
IDE పొడిగింపులు మీరు VS కోడ్ కోసం ఇలాంటి పొడిగింపుతో అభివృద్ధి సమయంలో సమస్యలను కూడా గుర్తించవచ్చు, ఇది సంభావ్య స్టాకింగ్ సందర్భ సమస్యలను నేరుగా మీ ఎడిటర్లో హైలైట్ చేస్తుంది.
అన్స్టాకింగ్ మరియు నియంత్రణను తిరిగి పొందడం మేము మూల కారణాన్ని గుర్తించిన తర్వాత, దానితో వ్యవహరించడం తదుపరి దశ. ఈ సమస్యను పరిష్కరించడానికి మీరు తీసుకోగల అనేక విధానాలు ఉన్నాయి మరియు నేను వాటిని క్రమంలో జాబితా చేస్తాను. మీరు ఏ స్థాయిలోనైనా ఎవరినైనా ఎంచుకోవచ్చు; ఎవరూ మరొకరిపై ఫిర్యాదు చేయలేరు లేదా అడ్డుకోలేరు. HTML నిర్మాణాన్ని మార్చండి ఇది సరైన పరిష్కారంగా పరిగణించబడుతుంది. మీరు స్టాకింగ్ సందర్భోచిత సమస్యను ఎదుర్కొనేందుకు, మీరు మీ HTMLలో ఫన్నీ స్థానాల్లో కొన్ని అంశాలను తప్పనిసరిగా ఉంచాలి. పేజీని పునర్నిర్మించడం వలన మీరు DOMని మళ్లీ ఆకృతి చేయడంలో మరియు స్టాకింగ్ సందర్భ సమస్యను తొలగించడంలో సహాయపడుతుంది. సమస్యాత్మక మూలకాన్ని కనుగొని, HTML మార్కప్లోని ట్రాపింగ్ ఎలిమెంట్ నుండి దాన్ని తీసివేయండి. ఉదాహరణకు, మేము .modal-containerని హెడర్ నుండి బయటకు తరలించి, దానిని
మూలకంలో ఉంచడం ద్వారా మొదటి దృష్టాంతాన్ని, “The Trapped Modal”ని పరిష్కరించవచ్చు.<హెడర్ క్లాస్="హెడర్">
హెడర్
<ప్రధాన తరగతి="కంటెంట్">ప్రధాన కంటెంట్
ఈ కంటెంట్ 2 యొక్క z-సూచికను కలిగి ఉంది మరియు ఇప్పటికీ మోడల్ను కవర్ చేయదు.
మీరు "ఓపెన్ మోడల్" బటన్ను క్లిక్ చేసినప్పుడు, మోడల్ అన్నింటికీ ముందు ఉంచబడుతుంది. షోయోంబో గాబ్రియేల్ అయోమైడ్ రాసిన పెన్ దృష్టాంతం 1: ది ట్రాప్డ్ మోడల్ (సొల్యూషన్) [ఫోర్క్డ్] చూడండి. ది సర్దుబాటుCSSలో పేరెంట్ స్టాకింగ్ సందర్భం మూలకం ఒకటి అయితే మీరు లేఅవుట్ను విచ్ఛిన్నం చేయకుండా కదలలేరు? సమస్యను పరిష్కరించడం మంచిది: తల్లిదండ్రులు సందర్భాన్ని ఏర్పాటు చేస్తారు. సందర్భాన్ని ట్రిగ్గర్ చేయడానికి బాధ్యత వహించే CSS ప్రాపర్టీ (లేదా ప్రాపర్టీలను) కనుగొని, దాన్ని తీసివేయండి. దీనికి ఉద్దేశ్యం ఉంటే మరియు తీసివేయలేకపోతే, మొత్తం కంటైనర్ను ఎత్తడానికి దాని తోబుట్టువుల మూలకాల కంటే తల్లిదండ్రులకు అధిక z-సూచిక విలువను ఇవ్వండి. అధిక z-సూచిక విలువతో, పేరెంట్ కంటైనర్ పైకి కదులుతుంది మరియు దాని పిల్లలు వినియోగదారుకు దగ్గరగా కనిపిస్తారు. "ది సబ్మెర్జ్డ్ డ్రాప్డౌన్" దృష్టాంతంలో మనం నేర్చుకున్న దాని ఆధారంగా, మేము డ్రాప్డౌన్ను నావ్బార్ నుండి బయటకు తరలించలేము; అది అర్ధవంతం కాదు. అయినప్పటికీ, మేము .navbar కంటైనర్ యొక్క z-ఇండెక్స్ విలువను .content మూలకం యొక్క z-సూచిక విలువ కంటే ఎక్కువగా పెంచవచ్చు. .navbar { నేపథ్యం: #333; /* z-సూచిక: 1; */ z-సూచిక: 3; స్థానం: బంధువు; }
ఈ మార్పుతో, .dropdown-menu ఇప్పుడు ఎలాంటి సమస్య లేకుండా కంటెంట్ ముందు కనిపిస్తుంది. షోయోంబో గాబ్రియేల్ అయోమైడ్ రాసిన పెన్ దృష్టాంతం 2: సబ్మెర్జ్డ్ డ్రాప్డౌన్ (సొల్యూషన్) [ఫోర్క్డ్] చూడండి. ఫ్రేమ్వర్క్ని ఉపయోగిస్తుంటే, పోర్టల్లను ప్రయత్నించండి రియాక్ట్ లేదా వ్యూ వంటి ఫ్రేమ్వర్క్లలో, పోర్టల్ అనేది DOMలో దాని సాధారణ పేరెంట్ సోపానక్రమం వెలుపల ఒక భాగాన్ని రెండర్ చేయడానికి మిమ్మల్ని అనుమతించే లక్షణం. పోర్టల్లు మీ భాగాల కోసం టెలిపోర్టేషన్ పరికరం లాంటివి. ప్రాప్లు, స్థితి మరియు ఈవెంట్ల కోసం దాని అసలు పేరెంట్కి తార్కికంగా కనెక్ట్ చేయబడి ఉంచేటప్పుడు వారు డాక్యుమెంట్లో ఎక్కడైనా (సాధారణంగా కుడివైపు document.bodyకి) కాంపోనెంట్ యొక్క HTMLని రెండర్ చేయడానికి మిమ్మల్ని అనుమతిస్తారు. రెండర్ చేయబడిన అవుట్పుట్ అక్షరాలా సమస్యాత్మక పేరెంట్ కంటైనర్ వెలుపల కనిపిస్తుంది కాబట్టి స్టాకింగ్ కాంటెక్స్ట్ ట్రాప్ల నుండి తప్పించుకోవడానికి ఇది సరైనది. ReactDOM.createPortal( <ఉపకరణ చిట్కా />, పత్రం.శరీరం );
ఇది మీ డ్రాప్డౌన్ కంటెంట్ దాని పేరెంట్ వెనుక దాచబడదని నిర్ధారిస్తుంది, పేరెంట్ ఓవర్ఫ్లో ఉన్నప్పటికీ: దాచబడిన లేదా తక్కువ z-ఇండెక్స్. మేము ఇంతకు ముందు చూసిన “ది క్లిప్డ్ టూల్టిప్” దృష్టాంతంలో, ఓవర్ఫ్లో నుండి టూల్టిప్ను రక్షించడానికి నేను పోర్టల్ని ఉపయోగించాను: డాక్యుమెంట్ బాడీలో ఉంచడం ద్వారా దాచిన క్లిప్ మరియు కంటైనర్లోని ట్రిగ్గర్ పైన ఉంచడం. షోయోంబో గాబ్రియేల్ అయోమైడ్ రాసిన పెన్ దృశ్యం 3: ది క్లిప్డ్ టూల్టిప్ (పరిష్కారం) [ఫోర్క్డ్] చూడండి. సైడ్ ఎఫెక్ట్స్ లేకుండా స్టాకింగ్ సందర్భాన్ని పరిచయం చేస్తున్నాము మునుపటి విభాగంలో వివరించిన అన్ని విధానాలు సమస్యాత్మక స్టాకింగ్ సందర్భాల నుండి మూలకాలను “అన్స్టాకింగ్” చేయడం లక్ష్యంగా పెట్టుకున్నాయి, అయితే మీకు వాస్తవానికి అవసరమైన లేదా స్టాకింగ్ సందర్భాన్ని సృష్టించాలనుకునే కొన్ని పరిస్థితులు ఉన్నాయి. కొత్త స్టాకింగ్ సందర్భాన్ని సృష్టించడం సులభం, కానీ అన్ని విధానాలు సైడ్ ఎఫెక్ట్తో వస్తాయి. అంటే, ఐసోలేషన్ని ఉపయోగించడం మినహా: ఐసోలేట్. ఒక మూలకానికి వర్తింపజేసినప్పుడు, ఆ మూలకం యొక్క పిల్లల స్టాకింగ్ సందర్భం దాని వెలుపలి మూలకాలచే ప్రభావితం కాకుండా ప్రతి బిడ్డకు సంబంధించి మరియు ఆ సందర్భంలోనే నిర్ణయించబడుతుంది. z-ఇండెక్స్: -1 వంటి ఆ మూలకానికి ప్రతికూల విలువను కేటాయించడం ఒక క్లాసిక్ ఉదాహరణ. మీకు .card భాగం ఉందని ఊహించుకోండి. మీరు .card టెక్స్ట్ వెనుక, కానీ కార్డ్ బ్యాక్గ్రౌండ్ పైన ఉండే అలంకార ఆకారాన్ని జోడించాలనుకుంటున్నారు. కార్డ్పై స్టాకింగ్ సందర్భం లేకుండా, z-ఇండెక్స్: -1 ఆకారాన్ని రూట్ స్టాకింగ్ సందర్భం (మొత్తం పేజీ) దిగువకు పంపుతుంది. ఇది .కార్డ్ యొక్క తెలుపు నేపథ్యం వెనుక కనిపించకుండా చేస్తుంది: షోయోంబో గాబ్రియేల్ అయోమైడ్ రాసిన పెన్ నెగటివ్ z-ఇండెక్స్ (సమస్య) [ఫోర్క్డ్] చూడండి. దీన్ని పరిష్కరించడానికి, మేము ఐసోలేషన్ని ప్రకటిస్తాము: పేరెంట్ .కార్డ్పై ఐసోలేట్: షోయోంబో గాబ్రియేల్ అయోమైడ్ రాసిన పెన్ నెగటివ్ z-ఇండెక్స్ (పరిష్కారం) [ఫోర్క్డ్] చూడండి. ఇప్పుడు, .card మూలకం స్టాకింగ్ సందర్భం అవుతుంది. దాని చైల్డ్ ఎలిమెంట్ — :సూడో-ఎలిమెంట్కు ముందు —పై సృష్టించబడిన అలంకార ఆకారం z-ఇండెక్స్: -1ని కలిగి ఉన్నప్పుడు, అది పేరెంట్ స్టాకింగ్ సందర్భం యొక్క చాలా దిగువకు వెళుతుంది. ఇది ఉద్దేశించిన విధంగా టెక్స్ట్ వెనుక మరియు కార్డ్ బ్యాక్గ్రౌండ్ పైన ఖచ్చితంగా ఉంటుంది. తీర్మానం గుర్తుంచుకోండి: తదుపరిసారి మీ z-సూచిక నియంత్రణలో లేనప్పుడు, అది ట్రాప్ చేయబడిన స్టాకింగ్ సందర్భం. సూచనలు
స్టాకింగ్ సందర్భం (MDN) Z-ఇండెక్స్ మరియు స్టాకింగ్ సందర్భాలు (web.dev) "CSSలో ఐసోలేషన్ ప్రాపర్టీతో కొత్త స్టాకింగ్ సందర్భాన్ని ఎలా సృష్టించాలి", నటాలీ పినా “వాట్ ది హెక్, z-ఇండెక్స్??”, జోష్ కమౌ
SmashingMagలో మరింత చదవడం
"పెద్ద ప్రాజెక్ట్లలో CSS Z-ఇండెక్స్ను నిర్వహించడం", స్టీవెన్ ఫ్రైసన్ “స్టిక్కీ హెడర్స్ అండ్ ఫుల్-హెట్ ఎలిమెంట్స్: ఎ ట్రిక్కీ కాంబినేషన్”, ఫిలిప్ బ్రౌనెన్ “భాగాల ఆధారిత వెబ్ అప్లికేషన్లో Z-ఇండెక్స్ను నిర్వహించడం”, పావెల్ పోమెరంట్సేవ్ "ది Z-ఇండెక్స్ CSS ప్రాపర్టీ: ఎ కాంప్రెహెన్సివ్ లుక్", లూయిస్ లాజారిస్
