Selle artikli lugemise tulemusel saate luua CSS-iga kattuvaid dive. Sel eesmärgil tutvume kõigepealt ' positsiooni ” ja „ z-indeks ” omadused.
Alustame!
CSS-i 'positsiooni' atribuut
HTML-is saate määrata elementide asukoha, kasutades ' positsiooni ” vara. Elemendi lõplik asukoht veebilehel määratakse selle parema, vasaku, ülemise, alumise ja kombinatsioonis z-indeksi omadustega.
Süntaks
Positsiooni atribuudi süntaks on:
positsiooni : väärtus
' asemel väärtus ”, saate määrata elementide erinevaid asukohti, nagu absoluutne, suhteline, fikseeritud ja kleepuv.
CSS-i 'z-index' atribuut
' z-indeks ” atribuuti kasutatakse elementide virna järjekorra määramiseks. Suurema z-indeksi väärtusega element asetatakse teiste ette.
Süntaks
Z-indeksi atribuudi süntaks on järgmine:
z-indeks : auto |numberÜlaltoodud süntaksis ' auto ' kasutatakse järjekorra määramiseks põhielemendi järgi, käsitsi järjestuse jaoks aga ' number ” on seatud z-indeksi atribuudi väärtuseks.
Liigume nüüd praktilise näite juurde, kuidas luua kattuvaid dive CSS-iga.
Näide 1: Teise jaotuse kattumine esimesega
HTML-i jaotises loome kaks div-i ja määrame erinevad klassinimed kui ' div1 ” ja „ div2 ”.
HTML
< keha >< div klass = 'div1' >< / div >
< div klass = 'div2' >< / div >
< / keha >
Nüüd liikuge CSS-i ja järgige antud juhiseid:
- Määrake positsiooni atribuudi väärtuseks ' absoluutne ” koha div1 jaoks täpselt see koht, kuhu soovite.
- Reguleerige div1 kõrgust ja laiust kui ' 250 pikslit ” ja „ 300 pikslit ”.
- z-indeksi väärtuseks määratakse ' 1 ”.
- Määra div1 taustavärviks ' rgb(4, 3, 75) ”.
CSS
.div1 {positsiooni : absoluutne ;
kõrgus : 250 pikslit ;
laius : 300 pikslit ;
z-indeks : 1 ;
taustal : rgb ( 4 , 3 , 75 ) ;
}
Väljund
Esimene div on edukalt paigutatud. Nüüd liigume teise osa juurde.
Div2 kattumiseks järgige antud juhiseid:
- Määrake positsiooni omaduse, laiuse ja kõrguse väärtus div2 samaks kui ' div1 ”.
- Määrake z-indeksi väärtuseks ' kaks ”, et asetada see esimese div ette.
- Määrake div2 jaoks erinev taustavärv ' rgb(0, 204, 255) ”.
- Määra div2 veeriseks ' 50 pikslit ” kui veerise ülaosa ja veerise vasak väärtus.
- Määrake div2 läbipaistmatuseks ' 0.7 ”.
CSS
.div2 {positsiooni : absoluutne ;
laius : 300 pikslit ;
kõrgus : 250 pikslit ;
z-indeks : 3 ;
taustal : rgb ( 0 , 204 , 255 ) ;
marginaal : 50 pikslit ;
läbipaistmatus : 0.7 ;
}
Väljund
Div2 kattub edukalt div1-ga.
Kui soovite seada div1 kahe peale, peate lihtsalt muutma z-indeksi väärtust. Vaatame selle kohta näidet.
Näide 2: Esimese jagamise kattumine teisega
Selles näites muudame mõlema divi z-indeksi väärtust. jaotises ' .div1 ' klassi CSS-faili, määrake väärtuseks ' z-indeks ' vara kui ' kaks ”:
z-indeks : kaks ;Pärast seda jaotises ' .div2 ' klassi, määrake '' väärtus z-indeks ' vara kui ' 1 ”:
z-indeks : 1 ;Selle tulemusena asetatakse esimene div teise div ette:
Oleme koostanud lihtsaima meetodi kahe kattuva div-i loomiseks CSS-iga.
Järeldus
' positsiooni ” ja „ z-indeks ” atribuuti kasutatakse kattuvate divide loomiseks CSS-is. Vaikimisi on z-indeksi väärtus 1, mis ütleb, et vastloodud div asetatakse olemasoleva div ette. Siiski saate kattuva järjestuse kohandamiseks määrata mis tahes väärtuse vastavalt oma vajadustele. Selles artiklis oleme pakkunud meetodeid CSS-iga kattuvate Divide loomiseks.