వెబ్ పేజీ లేఅవుట్ కోసం CSS స్థానాలు ఉపయోగించినప్పుడు సవాళ్ళలో ఒకటి, మీ అంశాల్లో కొన్ని ఇతరులను పోగొట్టుకుంటాయి. మీరు పైన ఉన్న HTML లో చివరి మూలకం కావాలనుకుంటే ఇది బాగుంటుంది, కాని మీరు ఏమి చేయకపోతే లేదా ఏమి చేయాలంటే, ప్రస్తుతం ఈ "లేయర్డ్" లుక్ కోసం కాల్స్ చేసినందుకు ఇతరులు అలా చేయకూడదనుకుంటే ? మార్గాన్ని మార్చడానికి మీరు CSS యొక్క ఆస్తిని ఉపయోగించాలి.
మీరు Word మరియు పవర్పాయింట్ లేదా 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- ఇండెక్స్ విలువకు కావలసిన ప్రతి అంశాన్ని ఇవ్వండి. ఉదాహరణకు, మీరు ఐదు వేర్వేరు అంశాలను కలిగి ఉంటే:
- మూలకం A - z- సూచిక -25
- మూలకం B - z- ఇండెక్స్ 82
- మూలకం C - z- ఇండెక్స్ సెట్ చేయబడలేదు
- మూలకం 10 యొక్క D - z - సూచిక
- మూలకం -3 యొక్క E - z- సూచిక
వారు ఈ క్రింది క్రమంలో స్థిరపరుస్తారు:
- మూలకం B
- మూలకం D
- మూలకం సి
- మూలకం E
- మూలకం A
ఇది మీ అంశాలని అణిచివేసేందుకు చాలా విభిన్న z- ఇండెక్స్ విలువలను ఉపయోగించాలని సిఫార్సు చేయబడింది. ఆ విధంగా, మీరు తరువాత పేజీకి మరిన్ని ఎలిమెంట్లను జత చేస్తే, అన్ని ఇతర మూలకాల యొక్క z- ఇండెక్స్ విలువలను సర్దుబాటు చేయకుండా వాటిని పొరలుగా ఉంచడానికి మీకు గది ఉంటుంది. ఉదాహరణకి:
- 100 మీ అత్యుత్తమ మూలకం కోసం
- మీ మధ్య మూలకం కోసం 0
- -100 మీ దిగువ మూలకం కోసం
మీరు రెండు అంశాలని ఒకే z- ఇండెక్స్ విలువను ఇవ్వవచ్చు. ఈ అంశాలు స్టాక్ చేయబడితే, వారు HTML లో రాసిన క్రమంలో, పైన ఉన్న చివరి మూలకంతో ప్రదర్శిస్తారు.
ఒక గమనిక: సమర్థవంతంగా z- ఇండెక్స్ లక్షణాన్ని ఉపయోగించడానికి ఒక మూలకం కోసం, ఇది ఒక బ్లాక్ స్థాయి మూలకం అయి ఉండాలి లేదా మీ CSS ఫైల్ లో "బ్లాక్" లేదా "ఇన్లైన్-బ్లాక్" యొక్క ప్రదర్శనను ఉపయోగించాలి.
