Ca urmare a citirii acestui articol, veți putea crea div-uri suprapuse cu CSS. În acest scop, în primul rând, vom afla despre „ poziţie ' și ' indicele z ” proprietăți.
Să începem!
Proprietatea „poziție” CSS
În HTML, puteți seta poziția elementelor utilizând „ poziţie ” proprietate. Poziția finală a unui element pe o pagină web este determinată de dreapta, stânga, sus, jos și în combinație cu proprietățile z-index.
Sintaxă
Sintaxa proprietății poziției este:
poziţie : valoare
In locul ' valoare ”, puteți seta diferite poziții ale elementelor, cum ar fi absolut, relativ, fix și sticky.
Proprietatea CSS „z-index”.
„ indicele z ” proprietatea este folosită pentru a seta ordinea stivei de elemente. Elementul care are valoarea mai mare a indicelui z este plasat în fața celorlalte.
Sintaxă
Sintaxa proprietății z-index este următoarea:
indicele z : auto |numărÎn sintaxa de mai sus, „ auto ” este folosit pentru a seta ordinea în funcție de elementul părinte, în timp ce pentru secvența manuală, „ număr ” este setat ca valoare a proprietății z-index.
Acum, să trecem la exemplul practic de creare a div-urilor suprapuse cu CSS.
Exemplul 1: Suprapunerea a doua div cu prima
În secțiunea HTML, vom crea două div-uri și vom atribui diferite nume de clasă ca „ div1 ' și ' div2 ”.
HTML
< corp >< div clasă = 'div1' >< / div >
< div clasă = 'div2' >< / div >
< / corp >
Acum, treceți la CSS și urmați instrucțiunile date:
- Setați valoarea proprietății poziției ca „ absolut ” pentru locul div1 exact locul unde vrei.
- Ajustați înălțimea și lățimea div1 ca „ 250px ' și ' 300px ”.
- Valoarea indexului z este setată ca „ 1 ”.
- Setați culoarea de fundal a div1 ca „ rgb(4, 3, 75) ”.
CSS
.div1 {poziţie : absolut ;
înălţime : 250px ;
lăţime : 300px ;
z-index : 1 ;
fundal : rgb ( 4 , 3 , 75 ) ;
}
Ieșire
Prima div este plasată cu succes. Acum, trecem la a doua div.
Pentru a suprapune div2, urmați instrucțiunile date:
- Setați valoarea proprietății poziției, lățimea și înălțimea div2-ului la fel ca „ div1 ”.
- Setați valoarea indexului z ca „ Două ” pentru a-l așeza în fața primului div.
- Setați o culoare de fundal diferită pentru div2 ca „ rgb(0, 204, 255) ”.
- Setați marja div2 ca „ 50px ” ca valoare margine-sus și margine-stânga.
- Setați opacitatea div2 ca „ 0,7 ”.
CSS
.div2 {poziţie : absolut ;
lăţime : 300px ;
înălţime : 250px ;
indicele z : 3 ;
fundal : rgb ( 0 , 204 , 255 ) ;
marginea : 50px ;
opacitate : 0,7 ;
}
Ieșire
Div2 se suprapune cu succes cu div1.
Dacă doriți să setați div1 peste div doi, trebuie doar să schimbați valoarea indexului z. Să vedem un exemplu în acest sens.
Exemplul 2: Suprapunerea primei div cu a doua
În acest exemplu, vom schimba valoarea indicelui z al ambelor div-uri. În ' .div1 ” clasa fișierului CSS, setați valoarea ” indicele z „proprietate ca „ Două ”:
indicele z : Două ;După aceea, în „ .div2 „, setați valoarea „ indicele z „proprietate ca „ 1 ”:
indicele z : 1 ;Ca rezultat, primul div va fi plasat în fața celui de-al doilea div:
Am compilat cea mai simplă metodă de a crea două div-uri suprapuse cu CSS.
Concluzie
„ poziţie ' și ' indicele z ” este folosită pentru a crea div-uri suprapuse în CSS. În mod implicit, valoarea indexului z este 1, ceea ce afirmă că div-ul nou creat va fi plasat în fața div-ului existent. Cu toate acestea, puteți specifica orice valoare în funcție de cerințele dumneavoastră pentru a ajusta secvența de suprapunere. În acest articol, am oferit metodele de creare a Div-urilor suprapuse cu CSS.