Perskaitę šį straipsnį galėsite sukurti persidengiančius div su CSS. Šiuo tikslu pirmiausia sužinosime apie „ padėtis “ ir „ z indeksas “ savybes.
Pradėkime!
CSS „pozicijos“ ypatybė
HTML galite nustatyti elementų padėtį naudodami „ padėtis ' nuosavybė. Galutinė elemento padėtis tinklalapyje nustatoma pagal jo dešinę, kairę, viršuje, apačioje ir kartu su z indekso ypatybėmis.
Sintaksė
Pozicijos nuosavybės sintaksė yra tokia:
padėtis : vertė
Vietoje ' vertė “, galite nustatyti skirtingas elementų pozicijas, pvz., absoliučią, santykinę, fiksuotą ir lipnią.
CSS „z-index“ ypatybė
„ z indeksas ypatybė naudojama elementų krūvos tvarkai nustatyti. Elementas, turintis didesnę z indekso reikšmę, dedamas prieš kitus.
Sintaksė
z indekso ypatybės sintaksė yra tokia:
z indeksas : automatinis |numerisAukščiau pateiktoje sintaksėje „ automatinis “ naudojamas tvarkai nustatyti pagal pirminį elementą, o rankinei sekai – „ numerį “ yra nustatytas kaip z indekso savybės vertė.
Dabar pereikime prie praktinio sutampančių div su CSS kūrimo pavyzdžio.
1 pavyzdys: Antrojo skirsnio sutapimas su pirmuoju
HTML skiltyje sukursime du divus ir priskirsime skirtingus klasių pavadinimus kaip „ div1 “ ir „ div2 “.
HTML
< kūnas >< div klasė = 'div1' >< / div >
< div klasė = 'div2' >< / div >
< / kūnas >
Dabar pereikite prie CSS ir vykdykite pateiktas instrukcijas:
- Nustatykite pozicijos nuosavybės vertę kaip „ absoliutus “ vietai div1 būtent ten, kur norite.
- Sureguliuokite div1 aukštį ir plotį kaip „ 250 piks “ ir „ 300 piks “.
- z indekso reikšmė nustatoma kaip ' 1 “.
- Nustatykite div1 fono spalvą kaip ' rgb(4, 3, 75) “.
CSS
.div1 {padėtis : absoliutus ;
aukščio : 250 piks ;
plotis : 300 piks ;
z indeksas : 1 ;
fone : rgb ( 4 , 3 , 75 ) ;
}
Išvestis
Pirmas daliklis sėkmingai įdėtas. Dabar pereiname prie antrojo skyriaus.
Norėdami persidengti div2, vadovaukitės pateiktomis instrukcijomis:
- Nustatykite div2 pozicijos ypatybės, pločio ir aukščio vertę kaip ir „ div1 “.
- Nustatykite z indekso reikšmę kaip ' du “, jei norite įdėti jį prieš pirmąjį div.
- Nustatykite kitą div2 fono spalvą kaip ' rgb(0, 204, 255) “.
- Div2 paraštę nustatykite kaip „ 50 piks “ kaip viršutinės ir kairiosios paraštės vertės.
- Div2 neskaidrumą nustatykite kaip ' 0.7 “.
CSS
.div2 {padėtis : absoliutus ;
plotis : 300 piks ;
aukščio : 250 piks ;
z indeksas : 3 ;
fone : rgb ( 0 , 204 , 255 ) ;
marža : 50 piks ;
neskaidrumas : 0.7 ;
}
Išvestis
Div2 sėkmingai sutampa su div1.
Jei norite nustatyti div1 ant div du, tereikia pakeisti z indekso reikšmę. Pažiūrėkime to pavyzdį.
2 pavyzdys: Pirmojo skirsnio sutapimas su antruoju
Šiame pavyzdyje pakeisime abiejų divų z indekso reikšmę. Viduje ' .div1 “ CSS failo klasė, nustatykite „ reikšmę z indeksas “ nuosavybė kaip “ du “:
z indeksas : du ;Po to „ .div2 “ klasėje, nustatykite „“ reikšmę z indeksas “ nuosavybė kaip “ 1 “:
z indeksas : 1 ;Dėl to pirmasis div bus dedamas prieš antrąjį:
Mes sudarėme lengviausią būdą sukurti du persidengiančius div su CSS.
Išvada
„ padėtis “ ir „ z indeksas ypatybė naudojama kuriant persidengiančius divus CSS. Pagal numatytuosius nustatymus z indekso reikšmė yra 1, o tai reiškia, kad naujai sukurtas div bus dedamas prieš esamą div. Tačiau galite nurodyti bet kokią vertę pagal savo reikalavimus, kad sureguliuotumėte persidengiančių seką. Šiame straipsnyje mes pasiūlėme būdus, kaip sukurti persidengiančius Divs su CSS.