CSS లో Z- ఇండెక్స్

క్యాస్కేడింగ్ స్టైల్ షీట్లతో స్థానీకరణ అతివ్యాప్తి ఎలిమెంట్స్

వెబ్ పేజీ లేఅవుట్ కోసం CSS స్థానాలు ఉపయోగించినప్పుడు సవాళ్ళలో ఒకటి, మీ అంశాల్లో కొన్ని ఇతరులను పోగొట్టుకుంటాయి. మీరు పైన ఉన్న HTML లో చివరి మూలకం కావాలనుకుంటే ఇది బాగుంటుంది, కాని మీరు ఏమి చేయకపోతే లేదా ఏమి చేయాలంటే, ప్రస్తుతం ఈ "లేయర్డ్" లుక్ కోసం కాల్స్ చేసినందుకు ఇతరులు అలా చేయకూడదనుకుంటే ? మార్గాన్ని మార్చడానికి మీరు CSS యొక్క ఆస్తిని ఉపయోగించాలి.

మీరు Adobe Photoshop వంటి వర్డ్ మరియు పవర్పాయింట్ లేదా మరింత శక్తివంతమైన ఇమేజ్ ఎడిటర్లో గ్రాఫిక్స్ సాధనాలను ఉపయోగించినట్లయితే, అప్పుడు మీరు చర్యలో z- ఇండెక్స్ వంటి వాటిని చూడవచ్చు. ఈ కార్యక్రమాలలో, మీరు గీసిన వస్తువు (ల) ను హైలైట్ చేయవచ్చు మరియు మీ డాక్యుమెంట్లోని కొన్ని అంశాలను "వెనుకకు పంపు" లేదా "ముందుకు తీసుకురండి" అనే ఎంపికను ఎంచుకోవచ్చు. Photoshop లో, మీకు ఈ విధులు లేవు, కానీ మీరు ప్రోగ్రామ్ యొక్క "లేయర్" పేన్ని కలిగి ఉంటారు మరియు ఈ పొరలను తిరిగి అమర్చడం ద్వారా కాన్వాస్లో ఒక మూలకం ఎక్కడ వస్తుంది. ఈ రెండు ఉదాహరణలు, మీరు తప్పనిసరిగా ఆ వస్తువులు యొక్క z- సూచిక సెట్ చేస్తున్నారు.

Z- సూచిక అంటే ఏమిటి?

మీరు పేజీలో ఎలిమెంట్లను స్థానానికి ఉంచడం కోసం CSS స్థానాలు ఉపయోగించినప్పుడు, మీరు మూడు కోణాలలో ఆలోచించాలి. రెండు ప్రామాణిక కొలతలు ఉన్నాయి: ఎడమ / కుడి మరియు ఎగువ / దిగువ. ఎడమ నుండి కుడికి ఇండెక్స్ x- ఇండెక్స్ అని పిలుస్తారు, ఎగువ నుండి దిగువ భాగానికి y- సూచిక ఉంటుంది. ఈ రెండు ఇండెక్స్లను ఉపయోగించి మీరు అడ్డంగా లేదా నిలువుగా ఉన్న అంశాలని ఎలా ఉంచుతారు.

వెబ్ డిజైన్ వచ్చినప్పుడు, పేజీ యొక్క స్టాకింగ్ ఆర్డర్ కూడా ఉంది. పేజీలోని ప్రతి ఎలిమెంట్ను ఏ ఇతర అంశానికైనా పైన లేదా క్రిందకి లేయర్ చేయవచ్చు. Z- ఇండెక్స్ ఆస్తి ప్రతి మూలకం ఎక్కడ స్టాక్ చేస్తుంది. X- ఇండెక్స్ మరియు y- ఇండెక్స్ సమాంతర మరియు నిలువు పంక్తులు అయితే, z- సూచిక అనేది పేజీ యొక్క లోతు, ముఖ్యంగా 3 వ కొలత.

కాగితం ముక్కలుగా వెబ్పేజీలో అంశాలను నేను ఆలోచించాలనుకుంటున్నాను, మరియు కోల్లెజ్ గా వెబ్ పేజిని కూడా నేను ఇష్టపడతాను. నేను ఎక్కడ ఉంచాలో కాగితం స్థానంచే నిర్ణయించబడుతుంది, మరియు అది ఇతర అంశాలచే కవర్ చేయబడినది z- సూచిక.

Z- ఇండెక్స్ అనేది ఒక సంఖ్య, సానుకూల (ఉదా. 100) లేదా ప్రతికూల (ఉదా -100). డిఫాల్ట్ z- ఇండెక్స్ 0. అత్యధిక z- ఇండెక్స్తో ఉన్న మూలకం పైన ఉంటుంది, తర్వాత తదుపరి అత్యధిక మరియు అందువలన తక్కువ z- సూచికకు. రెండు మూలకాలు ఒకే z- ఇండెక్స్ విలువ కలిగివుంటే (లేదా ఇది నిర్వచించబడదు, అర్థం 0 యొక్క డిఫాల్ట్ విలువను ఉపయోగించడం) బ్రౌజర్ వారు HTML లో కనిపించే క్రమంలో వాటిని పొర చేస్తుంది.

Z- సూచిక ఎలా ఉపయోగించాలి

మీరు మీ స్టాక్లో వేరే z- ఇండెక్స్ విలువకు కావలసిన ప్రతి అంశాన్ని ఇవ్వండి. ఉదాహరణకు, నాకు ఐదు వేర్వేరు అంశాలు ఉంటే:

• మూలకం 1 - -25 యొక్క z- సూచిక
• మూలకం 2 - 82 యొక్క z- సూచిక
• మూలకం 3 - z- ఇండెక్స్ సెట్ చేయబడలేదు
• మూలకం 4 - 10 యొక్క z- సూచిక
• మూలకం 5 - -3 యొక్క z- సూచిక

వారు ఈ క్రింది క్రమంలో స్థిరపరుస్తారు:

1. మూలకం 2
2. మూలకం 4
3. మూలకం 3
4. మూలకం 5
5. మూలకం 1

నేను మీ అంశాలని వేరు చేయడానికి చాలా విభిన్న z- ఇండెక్స్ విలువలను ఉపయోగించాలని సిఫార్సు చేస్తున్నాను. ఆ విధంగా, మీరు తరువాత పేజీకి మరిన్ని ఎలిమెంట్లను జత చేస్తే, అన్ని ఇతర మూలకాల యొక్క z- ఇండెక్స్ విలువలను సర్దుబాటు చేయకుండా వాటిని పొరలుగా ఉంచడానికి మీకు గది ఉంటుంది. ఉదాహరణకి:

• 100 నా అగ్రభాగాన మూలకం కోసం
• నా మధ్య మూలకం కోసం 0
• -100 నా దిగువ మూలకం కోసం

మీరు రెండు అంశాలని ఒకే z- ఇండెక్స్ విలువను ఇవ్వవచ్చు. ఈ అంశాలు స్టాక్ చేయబడితే, వారు HTML లో రాసిన క్రమంలో, పైన ఉన్న చివరి మూలకంతో ప్రదర్శిస్తారు.

ఒక గమనిక, సమర్థవంతంగా z- ఇండెక్స్ లక్షణాన్ని ఉపయోగించడానికి, అది ఒక బ్లాక్ స్థాయి మూలకం అయి ఉండాలి లేదా మీ CSS ఫైల్ లో "బ్లాక్" లేదా "ఇన్లైన్-బ్లాక్" యొక్క ప్రదర్శనను ఉపయోగించాలి.

జెన్నిఫర్ క్రిన్ని రచించిన అసలు వ్యాసం. జెరెమీ గిరార్డ్ చేత 12/09/16 న సవరించబడింది.