Som ett resultat av att läsa den här artikeln kommer du att kunna skapa överlappande div med CSS. För detta ändamål kommer vi först att lära oss om ' placera ' och ' z-index ' egenskaper.
Låt oss börja!
CSS 'position'-egenskap
I HTML kan du ställa in elementens position genom att använda ' placera ' fast egendom. Ett elements slutliga position på en webbsida bestäms av dess höger, vänster, topp, botten och i kombination med z-index-egenskaperna.
Syntax
Syntaxen för positionsegenskapen är:
placera : värde
I stället för ' värde ”, kan du ställa in olika positioner för element som absolut, relativ, fix och klibbig.
CSS 'z-index'-egenskap
den ' z-index ”-egenskapen används för att ställa in stapelordningen för element. Elementet som har det större värdet av z-index placeras framför de andra.
Syntax
Syntaxen för egenskapen z-index är följande:
z-index : bil |nummerI den ovan givna syntaxen ' bil ' används för att ställa in ordning enligt det överordnade elementet, medan för manuell sekvens, ' siffra ” sätts som värdet för z-index-egenskapen.
Låt oss nu gå till det praktiska exemplet på att skapa överlappande div:er med CSS.
Exempel 1: Överlappande andra div med första
I HTML-sektionen kommer vi att skapa två div och tilldela olika klassnamn som ' div1 ' och ' div2 ”.
HTML
< kropp >< div klass = 'div1' >< / div >
< div klass = 'div2' >< / div >
< / kropp >
Gå nu till CSS och följ instruktionerna:
- Ställ in värdet för positionsegenskapen som ' absolut ” för plats div1 exakt den plats där du vill.
- Justera höjden och bredden på div1 som ' 250 pixlar ' och ' 300 pixlar ”.
- Värdet på z-index är satt som ' 1 ”.
- Ställ in bakgrundsfärgen för div1 som ' rgb(4, 3, 75) ”.
CSS
.div1 {placera : absolut ;
höjd : 250 pixlar ;
bredd : 300 pixlar ;
z-index : 1 ;
bakgrund : rgb ( 4 , 3 , 75 ) ;
}
Produktion
Den första div är framgångsrikt placerad. Nu går vi till den andra div.
För att överlappa div2, följ instruktionerna:
- Ställ in värdet för positionsegenskap, bredd och höjd för div2 på samma sätt som ' div1 ”.
- Ställ in värdet på z-indexet som ' två ” för att placera den framför den första div.
- Ställ in en annan bakgrundsfärg för div2 som ' rgb(0, 204, 255) ”.
- Ställ in marginalen för div2 som ' 50 px ” som marginal-top och margin-left värde.
- Ställ in opaciteten för div2 som ' 0,7 ”.
CSS
.div2 {placera : absolut ;
bredd : 300 pixlar ;
höjd : 250 pixlar ;
z-index : 3 ;
bakgrund : rgb ( 0 , 204 , 255 ) ;
marginal : 50 px ;
opacitet : 0,7 ;
}
Produktion
Div2 överlappar framgångsrikt med div1.
Om du vill sätta div1 ovanpå div två behöver du bara ändra värdet på z-indexet. Låt oss se ett exempel på detta.
Exempel 2: Överlappande första div med andra
I det här exemplet kommer vi att ändra värdet på z-indexet för båda diverna. I ' .div1 ' klass för CSS-filen, ställ in värdet på ' z-index ' egendom som ' två ”:
z-index : två ;Efter det, i ' .div2 ' klass, ställ in värdet på ' z-index ' egendom som ' 1 ”:
z-index : 1 ;Som ett resultat kommer den första div:en att placeras framför den andra div:
Vi har sammanställt den enklaste metoden för att skapa två överlappande div med CSS.
Slutsats
den ' placera ' och ' z-index ”-egenskapen används för att skapa överlappande div i CSS. Som standard är värdet på z-index 1, vilket anger att den nyskapade div kommer att placeras framför den befintliga div. Du kan dock ange vilket värde som helst enligt dina krav för att justera den överlappande sekvensen. I den här artikeln har vi erbjudit metoderna för att skapa överlappande Divs med CSS.