Izlasot šo rakstu, jūs varēsiet izveidot pārklājošus div ar CSS. Šim nolūkam vispirms mēs uzzināsim par ' pozīciju ' un ' z-indekss ” īpašības.
Sāksim!
CSS “pozīcijas” rekvizīts
HTML varat iestatīt elementu pozīciju, izmantojot ' pozīciju ” īpašums. Elementa galīgo pozīciju tīmekļa lapā nosaka tā labā, kreisā, augšējā, apakšējā un kombinācijā ar z-indeksa rekvizītiem.
Sintakse
Pozīcijas īpašuma sintakse ir:
pozīciju : vērtību
Vietā ' vērtību ”, varat iestatīt dažādas elementu pozīcijas, piemēram, absolūto, relatīvo, fiksēto un lipīgo.
CSS “z-index” rekvizīts
' z-indekss Rekvizīts tiek izmantots, lai iestatītu elementu steku secību. Elements, kuram ir lielāka z-indeksa vērtība, tiek novietots pirms citiem.
Sintakse
Z-indeksa rekvizīta sintakse ir šāda:
z-indekss : auto |numursIepriekš norādītajā sintaksē ' auto ' tiek izmantots, lai iestatītu secību atbilstoši vecākajam elementam, savukārt manuālai secībai ' numuru ” ir iestatīts kā z indeksa rekvizīta vērtība.
Tagad pāriesim uz praktisko piemēru, kā izveidot pārklājošus divelementus ar CSS.
1. piemērs: Otrā dalījuma pārklāšanās ar pirmo
HTML sadaļā mēs izveidosim divus div un piešķirsim dažādus klašu nosaukumus kā ' div1 ' un ' div2 ”.
HTML
< ķermeni >< div klasē = 'div1' >< / div >
< div klasē = 'div2' >< / div >
< / ķermeni >
Tagad pārejiet uz CSS un izpildiet sniegtos norādījumus:
- Iestatiet pozīcijas īpašuma vērtību kā ' absolūts ” vietai div1 tieši tajā vietā, kur vēlaties.
- Pielāgojiet div1 augstumu un platumu kā ' 250 pikseļi ' un ' 300 pikseļi ”.
- Z indeksa vērtība ir iestatīta kā ' 1 ”.
- Iestatiet div1 fona krāsu kā ' rgb(4, 3, 75) ”.
CSS
.div1 {pozīciju : absolūts ;
augstums : 250 pikseļi ;
platums : 300 pikseļi ;
z-indekss : 1 ;
fons : rgb ( 4 , 3 , 75 ) ;
}
Izvade
Pirmais div ir veiksmīgi ievietots. Tagad mēs pārejam uz otro daļu.
Lai pārklātu div2, izpildiet sniegtos norādījumus:
- Iestatiet div2 pozīcijas rekvizīta vērtību, platumu un augstumu tādu pašu kā ' div1 ”.
- Iestatiet z indeksa vērtību kā ' divi ”, lai novietotu to pirms pirmā div.
- Iestatiet citu fona krāsu div2 kā ' rgb(0, 204, 255) ”.
- Iestatiet div2 malu kā ' 50 pikseļi ” kā piemales augšdaļas un piemales kreisās puses vērtību.
- Iestatiet div2 necaurredzamību kā ' 0.7 ”.
CSS
.div2 {pozīciju : absolūts ;
platums : 300 pikseļi ;
augstums : 250 pikseļi ;
z-indekss : 3 ;
fons : rgb ( 0 , 204 , 255 ) ;
starpība : 50 pikseļi ;
necaurredzamība : 0.7 ;
}
Izvade
Div2 veiksmīgi pārklājas ar div1.
Ja vēlaties iestatīt div1 virs div div, jums vienkārši jāmaina z indeksa vērtība. Apskatīsim piemēru tam.
2. piemērs: pirmā dalījuma pārklāšanās ar otro
Šajā piemērā mēs mainīsim abu div z-indeksa vērtību. Iekš ' .div1 ' CSS faila klase, iestatiet vērtību ' z-indekss ' īpašums kā ' divi ”:
z-indekss : divi ;Pēc tam sadaļā ' .div2 ' klasē, iestatiet ' vērtību z-indekss ' īpašums kā ' 1 ”:
z-indekss : 1 ;Rezultātā pirmais divstūris tiks novietots pirms otrā div:
Mēs esam apkopojuši vienkāršāko metodi, lai izveidotu divus pārklājošus divelementus ar CSS.
Secinājums
' pozīciju ' un ' z-indekss ” rekvizīts tiek izmantots, lai izveidotu pārklājošus divelementus CSS. Pēc noklusējuma z-indeksa vērtība ir 1, kas norāda, ka jaunizveidotais div tiks novietots esošā div priekšā. Tomēr varat norādīt jebkuru vērtību atbilstoši savām prasībām, lai pielāgotu pārklāšanās secību. Šajā rakstā mēs esam piedāvājuši metodes, kā izveidot pārklājošus Divus ar CSS.