ఈ కథనాన్ని చదివిన ఫలితంగా, మీరు CSSతో అతివ్యాప్తి చెందుతున్న divలను సృష్టించగలరు. ఈ ప్రయోజనం కోసం, మొదట, మేము '' గురించి నేర్చుకుంటాము. స్థానం 'మరియు' z-సూచిక 'గుణాలు.
ప్రారంభిద్దాం!
CSS 'స్థానం' ఆస్తి
HTMLలో, మీరు “ని ఉపయోగించడం ద్వారా మూలకాల స్థానాన్ని సెట్ చేయవచ్చు స్థానం ”ఆస్తి. వెబ్ పేజీలో మూలకం యొక్క తుది స్థానం దాని కుడి, ఎడమ, ఎగువ, దిగువ మరియు z-ఇండెక్స్ లక్షణాలతో కలిపి నిర్ణయించబడుతుంది.
వాక్యనిర్మాణం
స్థానం ఆస్తి యొక్క వాక్యనిర్మాణం:
స్థానం : విలువ
స్థానంలో ' విలువ ”, మీరు సంపూర్ణమైన, సాపేక్షమైన, స్థిరమైన మరియు జిగట వంటి మూలకాల యొక్క విభిన్న స్థానాలను సెట్ చేయవచ్చు.
CSS 'z-ఇండెక్స్' ప్రాపర్టీ
ది ' z-సూచిక ” ఎలిమెంట్స్ స్టాక్ క్రమాన్ని సెట్ చేయడానికి ప్రాపర్టీ ఉపయోగించబడుతుంది. z-ఇండెక్స్ యొక్క ఎక్కువ విలువ కలిగిన మూలకం ఇతర వాటి ముందు ఉంచబడుతుంది.
వాక్యనిర్మాణం
z-ఇండెక్స్ ప్రాపర్టీ యొక్క సింటాక్స్ క్రింది విధంగా ఉంది:
z-సూచిక : దానంతట అదే |సంఖ్యపైన ఇచ్చిన సింటాక్స్‌లో, “ దానంతట అదే ” మాతృ మూలకం ప్రకారం క్రమాన్ని సెట్ చేయడానికి ఉపయోగించబడుతుంది, అయితే మాన్యువల్ సీక్వెన్స్ కోసం, “ సంఖ్య ” అనేది z-ఇండెక్స్ ప్రాపర్టీ విలువగా సెట్ చేయబడింది.
ఇప్పుడు, CSSతో అతివ్యాప్తి చెందుతున్న divలను సృష్టించే ఆచరణాత్మక ఉదాహరణకి వెళ్దాం.
ఉదాహరణ 1: మొదటి దానితో రెండవ డివిని అతివ్యాప్తి చేయడం
HTML విభాగంలో, మేము రెండు divలను సృష్టిస్తాము మరియు విభిన్న తరగతి పేర్లను “ div1 'మరియు' div2 ”.
HTML
< శరీరం >< div తరగతి = 'div1' >< / div >
< div తరగతి = 'div2' >< / div >
< / శరీరం >
ఇప్పుడు, CSSకి వెళ్లి, ఇచ్చిన సూచనలను అనుసరించండి:
- స్థానం ఆస్తి విలువను ఇలా సెట్ చేయండి సంపూర్ణ ” మీరు కోరుకున్న ప్రదేశంలో డివి1ని ఉంచడానికి.
- div1 ఎత్తు మరియు వెడల్పును ఇలా సర్దుబాటు చేయండి 250px 'మరియు' 300px ”.
- z-ఇండెక్స్ విలువ ఇలా సెట్ చేయబడింది 1 ”.
- div1 యొక్క నేపథ్య రంగును 'గా సెట్ చేయండి rgb(4, 3, 75) ”.
CSS
.div1 {స్థానం : సంపూర్ణ ;
ఎత్తు : 250px ;
వెడల్పు : 300px ;
z-సూచిక : 1 ;
నేపథ్య : rgb ( 4 , 3 , 75 ) ;
}
అవుట్‌పుట్
మొదటి డివి విజయవంతంగా ఉంచబడింది. ఇప్పుడు, మేము రెండవ డివికి వెళ్తాము.
div2ని అతివ్యాప్తి చేయడానికి, ఇచ్చిన సూచనలను అనుసరించండి:
- div2 యొక్క స్థానం ఆస్తి, వెడల్పు మరియు ఎత్తు యొక్క విలువను '' వలె సెట్ చేయండి div1 ”.
- z-సూచిక విలువను ''గా సెట్ చేయండి రెండు ” మొదటి డివి ముందు ఉంచడానికి.
- div2 కోసం వేరొక నేపథ్య రంగుని సెట్ చేయండి ' rgb(0, 204, 255) ”.
- div2 యొక్క మార్జిన్‌ను 'గా సెట్ చేయండి 50px ” మార్జిన్-టాప్ మరియు మార్జిన్-లెఫ్ట్ విలువగా.
- div2 యొక్క అస్పష్టతను 'గా సెట్ చేయండి 0.7 ”.
CSS
.div2 {స్థానం : సంపూర్ణ ;
వెడల్పు : 300px ;
ఎత్తు : 250px ;
z-సూచిక : 3 ;
నేపథ్య : rgb ( 0 , 204 , 255 ) ;
మార్జిన్ : 50px ;
అస్పష్టత : 0.7 ;
}
అవుట్‌పుట్
Div2 div1తో విజయవంతంగా అతివ్యాప్తి చెందుతుంది.
మీరు div రెండు పైన div1ని సెట్ చేయాలనుకుంటే, మీరు z-ఇండెక్స్ విలువను మార్చాలి. దీనికి ఒక ఉదాహరణ చూద్దాం.
ఉదాహరణ 2: మొదటి డివిని రెండవ దానితో అతివ్యాప్తి చేయడం
ఈ ఉదాహరణలో, మేము రెండు divల యొక్క z-ఇండెక్స్ విలువను మారుస్తాము. లో ' .div1 'CSS ఫైల్ యొక్క తరగతి, ' విలువను సెట్ చేయండి z-సూచిక 'ఆస్తి' రెండు ”:
z-సూచిక : రెండు ;ఆ తరువాత, ' .div2 'తరగతి, ' విలువను సెట్ చేయండి z-సూచిక 'ఆస్తి' 1 ”:
z-సూచిక : 1 ;ఫలితంగా, మొదటి div రెండవ div ముందు ఉంచబడుతుంది:
CSSతో రెండు అతివ్యాప్తి చెందుతున్న divలను సృష్టించడానికి మేము సులభమైన పద్ధతిని కంపైల్ చేసాము.
ముగింపు
ది ' స్థానం 'మరియు' z-సూచిక ” CSSలో అతివ్యాప్తి చెందుతున్న divలను సృష్టించడానికి ప్రాపర్టీ ఉపయోగించబడుతుంది. డిఫాల్ట్‌గా, z-ఇండెక్స్ విలువ 1, ఇది కొత్తగా సృష్టించబడిన div ఇప్పటికే ఉన్న div ముందు ఉంచబడుతుంది. అయినప్పటికీ, అతివ్యాప్తి క్రమాన్ని సర్దుబాటు చేయడానికి మీరు మీ అవసరాలకు అనుగుణంగా ఏదైనా విలువను పేర్కొనవచ్చు. ఈ కథనంలో, మేము CSSతో అతివ్యాప్తి చెందుతున్న Divలను సృష్టించే పద్ధతులను అందించాము.