Kao rezultat čitanja ovog članka, moći ćete stvoriti preklapajuće divove pomoću CSS-a. U tu svrhu, prvo ćemo naučiti o ' položaj ' i ' z-indeks ' Svojstva.
Započnimo!
Svojstvo CSS “position”.
U HTML-u možete postaviti položaj elemenata korištenjem ' položaj ” vlasništvo. Konačni položaj elementa na web stranici određen je njegovim desnim, lijevim, gornjim, donjim i u kombinaciji sa svojstvima z-index.
Sintaksa
Sintaksa svojstva položaja je:
položaj : vrijednost
Na mjestu ' vrijednost ”, možete postaviti različite položaje elemenata kao što su apsolutni, relativni, fiksni i ljepljivi.
Svojstvo CSS “z-index”.
' z-indeks ” Svojstvo se koristi za postavljanje redoslijeda hrpa elemenata. Element koji ima veću vrijednost z-indeksa postavlja se ispred ostalih.
Sintaksa
Sintaksa svojstva z-index je sljedeća:
z-indeks : auto |brojU gore navedenoj sintaksi, ' auto ” koristi se za postavljanje redoslijeda prema nadređenom elementu, dok za ručni niz, „ broj ” postavlja se kao vrijednost svojstva z-index.
Sada prijeđimo na praktični primjer stvaranja preklapajućih divova s CSS-om.
Primjer 1: Preklapanje drugog diva s prvim
U odjeljku HTML izradit ćemo dva diva i dodijeliti različita imena klasa kao ' div1 ' i ' div2 ”.
HTML
< tijelo >< div razreda = 'div1' >< / div >
< div razreda = 'div2' >< / div >
< / tijelo >
Sada prijeđite na CSS i slijedite dane upute:
- Postavite vrijednost svojstva položaja kao ' apsolutna ” za mjesto div1 točno ono mjesto gdje želite.
- Podesite visinu i širinu div1 kao ' 250 px ' i ' 300 px ”.
- Vrijednost z-indeksa postavljena je kao ' 1 ”.
- Postavite boju pozadine div1 kao ' rgb(4, 3, 75) ”.
CSS
.div1 {položaj : apsolutni ;
visina : 250 px ;
širina : 300 px ;
z-indeks : 1 ;
pozadina : rgb ( 4 , 3 , 75 ) ;
}
Izlaz
Prvi div je uspješno postavljen. Sada prelazimo na drugu div.
Za preklapanje div2 slijedite dane upute:
- Postavite vrijednost svojstva položaja, širinu i visinu div2 iste kao ' div1 ”.
- Postavite vrijednost z-indeksa kao ' dva ” da ga postavite ispred prvog div.
- Postavite drugu boju pozadine za div2 kao ' rgb(0, 204, 255) ”.
- Postavite marginu div2 kao ' 50 px ” kao vrijednost margine-gornja i margin-left.
- Postavite neprozirnost div2 kao ' 0.7 ”.
CSS
.div2 {položaj : apsolutna ;
širina : 300 px ;
visina : 250 px ;
z-indeks : 3 ;
pozadina : rgb ( 0 , 204 , 255 ) ;
margina : 50 px ;
neprozirnost : 0.7 ;
}
Izlaz
Div2 se uspješno preklapa s div1.
Ako želite postaviti div1 na vrh div dva, samo trebate promijeniti vrijednost z-indeksa. Pogledajmo primjer ovoga.
Primjer 2: Preklapanje prve jedinice s drugom
U ovom primjeru promijenit ćemo vrijednost z-indeksa oba diva. u ' .div1 ' klase CSS datoteke, postavite vrijednost ' z-indeks ' svojstvo kao ' dva ”:
z-indeks : dva ;Nakon toga, u “ .div2 ', postavite vrijednost za ' z-indeks ' svojstvo kao ' 1 ”:
z-indeks : 1 ;Kao rezultat toga, prvi div bit će postavljen ispred drugog diva:
Sastavili smo najjednostavniju metodu za stvaranje dva preklapajuća diva pomoću CSS-a.
Zaključak
' položaj ' i ' z-indeks ” Svojstvo se koristi za stvaranje preklapajućih divova u CSS-u. Prema zadanim postavkama, vrijednost z-indexa je 1, što znači da će se novostvoreni div postaviti ispred postojećeg diva. Međutim, možete navesti bilo koju vrijednost prema svojim zahtjevima za prilagodbu slijeda preklapanja. U ovom smo članku ponudili metode za stvaranje preklapajućih Divova s CSS-om.