Kot rezultat branja tega članka boste lahko ustvarili prekrivajoče se dive s CSS. V ta namen se bomo najprej poučili o » položaj « in » z-indeks ” lastnosti.
Začnimo!
Lastnost CSS “position”.
V HTML lahko nastavite položaj elementov z uporabo ' položaj ” lastnina. Končni položaj elementa na spletni strani je določen z njegovimi desnimi, levimi, zgornjimi, spodnjimi in v kombinaciji z lastnostmi z-indeksa.
Sintaksa
Sintaksa lastnosti položaja je:
položaj : vrednost
Na mestu ' vrednost «, lahko nastavite različne položaje elementov, kot so absolutni, relativni, fiksni in lepljivi.
Lastnost CSS 'z-index'.
' z-indeks Lastnost se uporablja za nastavitev vrstnega reda skladov elementov. Element z večjo vrednostjo z-indeksa se postavi pred ostale.
Sintaksa
Sintaksa lastnosti z-index je naslednja:
z-indeks : avto |številoV zgornji sintaksi je ' avto ' se uporablja za nastavitev vrstnega reda glede na nadrejeni element, medtem ko za ročno zaporedje ' število ” je nastavljena kot vrednost lastnosti z-index.
Zdaj pa preidimo na praktični primer ustvarjanja prekrivajočih se elementov div s CSS.
1. primer: Prekrivanje drugega razdelka s prvim
V razdelku HTML bomo ustvarili dva diva in dodelili različna imena razredov kot ' div1 « in » div2 ”.
HTML
< telo >< div razred = 'div1' >< / div >
< div razred = 'div2' >< / div >
< / telo >
Zdaj se premaknite na CSS in sledite podanim navodilom:
- Nastavite vrednost lastnosti položaja kot ' absolutno ” za mesto div1 točno tisto mesto, kjer želite.
- Prilagodite višino in širino div1 kot ' 250 slikovnih pik « in » 300 slikovnih pik ”.
- Vrednost z-indeksa je nastavljena kot ' 1 ”.
- Nastavite barvo ozadja div1 kot ' rgb(4, 3, 75) ”.
CSS
.div1 {položaj : absolutno ;
višina : 250 slikovnih pik ;
premer : 300 slikovnih pik ;
z-indeks : 1 ;
ozadje : rgb ( 4 , 3 , 75 ) ;
}
Izhod
Prvi div je uspešno postavljen. Zdaj se premaknemo na drugo div.
Za prekrivanje div2 sledite danim navodilom:
- Nastavite vrednost lastnosti položaja, širino in višino div2 enako kot ' div1 ”.
- Nastavite vrednost z-indeksa kot ' dva ”, da ga postavite pred prvi div.
- Nastavite drugo barvo ozadja za div2 kot ' rgb(0, 204, 255) ”.
- Nastavite rob div2 kot ' 50 slikovnih pik ” kot vrednost roba zgoraj in roba levo.
- Nastavite motnost div2 kot ' 0,7 ”.
CSS
.div2 {položaj : absolutno ;
premer : 300 slikovnih pik ;
višina : 250 slikovnih pik ;
z-indeks : 3 ;
ozadje : rgb ( 0 , 204 , 255 ) ;
marža : 50 slikovnih pik ;
nepreglednost : 0,7 ;
}
Izhod
Div2 se uspešno prekriva z div1.
Če želite nastaviti div1 na vrh div dva, morate le spremeniti vrednost z-indeksa. Oglejmo si primer tega.
Primer 2: Prekrivanje prvega diva z drugim
V tem primeru bomo spremenili vrednost z-indeksa obeh divov. V ' .div1 ' datoteke CSS, nastavite vrednost ' z-indeks » lastnina kot « dva ”:
z-indeks : dva ;Po tem, v ' .div2 ', nastavite vrednost za ' z-indeks » lastnina kot « 1 ”:
z-indeks : 1 ;Posledično bo prvi div postavljen pred drugi div:
Zbrali smo najlažjo metodo za ustvarjanje dveh prekrivajočih se elementov div s CSS.
Zaključek
' položaj « in » z-indeks Lastnost se uporablja za ustvarjanje prekrivajočih se elementov div v CSS. Privzeto je vrednost z-indeksa 1, kar pomeni, da bo na novo ustvarjeni div postavljen pred obstoječi div. Vendar pa lahko določite katero koli vrednost glede na vaše zahteve, da prilagodite zaporedje prekrivanja. V tem članku smo ponudili metode za ustvarjanje prekrivajočih se Div s CSS.