Tämän artikkelin lukemisen tuloksena voit luoda päällekkäisiä div-elementtejä CSS:n kanssa. Tätä tarkoitusta varten opimme ensin ' asema ' ja ' z-indeksi ” ominaisuuksia.
Aloitetaan!
CSS 'position' -ominaisuus
HTML:ssä voit asettaa elementtien sijainnin käyttämällä ' asema ” omaisuutta. Elementin lopullinen sijainti verkkosivulla määräytyy sen oikean, vasemman, ylä- ja alaosan perusteella sekä yhdessä z-indeksin ominaisuuksien kanssa.
Syntaksi
Sijaintiominaisuuden syntaksi on:
asema : arvo
'' arvo ”, voit asettaa elementtien eri paikkoja, kuten absoluuttisen, suhteellisen, kiinteän ja tahmean.
CSS 'z-index' -ominaisuus
' z-indeksi ” -ominaisuutta käytetään elementtien pinojärjestyksen asettamiseen. Elementti, jonka z-indeksi on suurempi, sijoitetaan muiden eteen.
Syntaksi
Z-index-ominaisuuden syntaksi on seuraava:
z-indeksi : auto |numeroYllä annetussa syntaksissa ' auto ' käytetään asettamaan järjestys pääelementin mukaan, kun taas manuaalisessa järjestyksessä ' määrä ” on asetettu z-indeksiominaisuuden arvoksi.
Siirrytään nyt käytännön esimerkkiin päällekkäisten div-elementtien luomisesta CSS:n kanssa.
Esimerkki 1: Päällekkäinen toinen jako ensimmäisen kanssa
HTML-osiossa luomme kaksi div:tä ja annamme eri luokkien nimet ' div1 ' ja ' div2 ”.
HTML
< kehon >< div luokkaa = 'div1' >< / div >
< div luokkaa = 'div2' >< / div >
< / kehon >
Siirry nyt CSS:ään ja seuraa annettuja ohjeita:
- Aseta sijaintiominaisuuden arvoksi ' ehdoton ” paikkaan div1 juuri sinne minne haluat.
- Säädä div1:n korkeutta ja leveyttä muodossa ' 250 pikseliä ' ja ' 300 pikseliä ”.
- z-indeksin arvoksi asetetaan ' 1 ”.
- Aseta div1:n taustaväriksi ' rgb(4, 3, 75) ”.
CSS
.div1 {asema : ehdoton ;
korkeus : 250 pikseliä ;
leveys : 300 pikseliä ;
z-indeksi : 1 ;
tausta : rgb ( 4 , 3 , 75 ) ;
}
Lähtö
Ensimmäinen div on asetettu onnistuneesti. Nyt siirrymme toiseen divisioonaan.
Voit mennä päällekkäin div2:n kanssa noudattamalla annettuja ohjeita:
- Aseta div2:n sijainnin ominaisuuden, leveyden ja korkeuden arvoksi sama kuin ' div1 ”.
- Aseta z-indeksin arvoksi ' kaksi ” sijoittaaksesi sen ensimmäisen jaon eteen.
- Aseta eri taustaväriksi div2:lle ' rgb(0; 204; 255) ”.
- Aseta div2:n marginaaliksi ' 50 pikseliä ” marginaalin yläosan ja marginaalin vasemman arvona.
- Aseta div2:n peittävyydeksi ' 0.7 ”.
CSS
.div2 {asema : ehdoton ;
leveys : 300 pikseliä ;
korkeus : 250 pikseliä ;
z-indeksi : 3 ;
tausta : rgb ( 0 , 204 , 255 ) ;
marginaali : 50 pikseliä ;
opasiteetti : 0.7 ;
}
Lähtö
Div2 menee päällekkäin div1:n kanssa.
Jos haluat asettaa div1:n div kaksin päälle, sinun tarvitsee vain muuttaa z-indeksin arvoa. Katsotaanpa esimerkkiä tästä.
Esimerkki 2: Päällekkäinen ensimmäinen jako toisen kanssa
Tässä esimerkissä muutamme kummankin divin z-indeksin arvoa. ' .div1 CSS-tiedoston luokka, aseta arvo z-indeksi ' omaisuutta nimellä ' kaksi ':
z-indeksi : kaksi ;Sen jälkeen kohdassa ' .div2 ' luokka, aseta ' z-indeksi ' omaisuutta nimellä ' 1 ':
z-indeksi : 1 ;Tämän seurauksena ensimmäinen div sijoitetaan toisen div:n eteen:
Olemme koonneet helpoimman tavan luoda kaksi päällekkäistä div:tä CSS:n kanssa.
Johtopäätös
' asema ' ja ' z-indeksi ” -ominaisuutta käytetään päällekkäisten div-osien luomiseen CSS:ssä. Oletusarvoisesti z-indeksin arvo on 1, mikä tarkoittaa, että äskettäin luotu div sijoitetaan olemassa olevan div:n eteen. Voit kuitenkin määrittää minkä tahansa arvon tarpeidesi mukaan säätääksesi päällekkäistä järjestystä. Tässä artikkelissa olemme tarjonneet tapoja luoda päällekkäisiä Diveja CSS:n kanssa.