Som et resultat av å lese denne artikkelen, vil du kunne lage overlappende div med CSS. For dette formålet vil vi først lære om ' stilling ' og ' z-indeks ' eiendommer.
La oss komme i gang!
CSS 'posisjon' egenskap
I HTML kan du angi plasseringen av elementene ved å bruke ' stilling ' eiendom. Et elements endelige plassering på en nettside bestemmes av dets høyre, venstre, topp, bunn og i kombinasjon med z-indeksegenskapene.
Syntaks
Syntaksen til posisjonsegenskapen er:
stilling : verdi
I stedet for ' verdi ”, kan du angi forskjellige posisjoner for elementer som absolutt, relativ, fast og klebrig.
CSS «z-index»-egenskap
« z-indeks ”-egenskapen brukes til å angi stabelrekkefølgen til elementer. Elementet som har den største verdien av z-indeks er plassert foran de andre.
Syntaks
Syntaksen til z-indeks-egenskapen er som følger:
z-indeks : auto |nummerI den ovenfor gitte syntaksen, ' auto ' brukes til å sette rekkefølge i henhold til det overordnede elementet, mens for manuell sekvens, ' Antall ” settes som verdien av z-indeks-egenskapen.
La oss nå gå til det praktiske eksemplet på å lage overlappende div med CSS.
Eksempel 1: Overlapping av andre div med den første
I HTML-delen vil vi lage to div og tildele forskjellige klassenavn som ' div1 ' og ' div2 '.
HTML
< kropp >< div klasse = 'div1' >< / div >
< div klasse = 'div2' >< / div >
< / kropp >
Gå nå til CSS og følg de gitte instruksjonene:
- Sett verdien av posisjonsegenskapen som ' absolutt ” for plass div1 akkurat det stedet du ønsker.
- Juster høyden og bredden på div1 som ' 250 piksler ' og ' 300 piksler '.
- Verdien av z-indeksen er satt som ' 1 '.
- Sett bakgrunnsfargen til div1 som ' rgb(4, 3, 75) '.
CSS
.div1 {stilling : absolutt ;
høyde : 250 piksler ;
bredde : 300 piksler ;
z-indeks : 1 ;
bakgrunn : rgb ( 4 , 3 , 75 ) ;
}
Produksjon
Den første div er vellykket plassert. Nå går vi til andre div.
For å overlappe div2, følg de gitte instruksjonene:
- Sett verdien av posisjonsegenskapen, bredden og høyden til div2 samme som ' div1 '.
- Sett verdien av z-indeksen som ' to ” for å plassere den foran første div.
- Sett en annen bakgrunnsfarge for div2 som ' rgb(0, 204, 255) '.
- Sett margen til div2 som ' 50 piksler ” som margin-top og margin-venstre verdi.
- Sett opasiteten til div2 som ' 0,7 '.
CSS
.div2 {stilling : absolutt ;
bredde : 300 piksler ;
høyde : 250 piksler ;
z-indeks : 3 ;
bakgrunn : rgb ( 0 , 204 , 255 ) ;
margin : 50 piksler ;
opasitet : 0,7 ;
}
Produksjon
Div2 overlapper med div1.
Hvis du vil sette div1 på toppen av div to, trenger du bare å endre verdien på z-indeksen. La oss se et eksempel på dette.
Eksempel 2: Overlapping av første div med andre
I dette eksemplet vil vi endre verdien av z-indeksen til begge div. I « .div1 '-klassen til CSS-filen, angi verdien til ' z-indeks ' eiendom som ' to ':
z-indeks : to ;Etter det, i ' .div2 '-klassen, angi verdien av ' z-indeks ' eiendom som ' 1 ':
z-indeks : 1 ;Som et resultat vil den første div plasseres foran den andre div:
Vi har samlet den enkleste metoden for å lage to overlappende div med CSS.
Konklusjon
« stilling ' og ' z-indeks ”-egenskapen brukes til å lage overlappende div-er i CSS. Som standard er verdien av z-indeksen 1, som sier at den nyopprettede div vil bli plassert foran eksisterende div. Du kan imidlertid spesifisere hvilken som helst verdi i henhold til dine krav for å justere den overlappende sekvensen. I denne artikkelen har vi tilbudt metodene for å lage overlappende Divs med CSS.