Com a resultat de llegir aquest article, podreu crear divs superposats amb CSS. Amb aquest propòsit, en primer lloc, coneixerem el “ posició ' i ' índex z ” propietats.
Comencem!
Propietat 'posició' CSS
En HTML, podeu establir la posició dels elements utilitzant el ' posició ' propietat. La posició final d'un element en una pàgina web està determinada per la seva dreta, esquerra, superior, inferior i en combinació amb les propietats de l'índex z.
Sintaxi
La sintaxi de la propietat de la posició és:
posició : valor
En el lloc de ' valor ”, podeu establir diferents posicions d'elements com ara absolut, relatiu, fix i enganxós.
Propietat CSS 'z-index'.
El ' índex z ” s'utilitza per establir l'ordre de la pila dels elements. L'element que té més valor d'índex z es col·loca davant dels altres.
Sintaxi
La sintaxi de la propietat z-index és la següent:
índex z : automàtic |númeroEn la sintaxi anterior, ' automàtic ' s'utilitza per establir l'ordre segons l'element pare, mentre que per a la seqüència manual, el ' nombre ” s'estableix com el valor de la propietat z-index.
Ara, passem a l'exemple pràctic de creació de divs superposats amb CSS.
Exemple 1: superposició de la segona div amb la primera
A la secció HTML, crearem dos divs i assignarem noms de classe diferents com ' div1 ' i ' div2 ”.
HTML
< cos >< div classe = 'div1' >< / div >
< div classe = 'div2' >< / div >
< / cos >
Ara, aneu al CSS i seguiu les instruccions donades:
- Estableix el valor de la propietat de la posició com a ' absolut ” per al lloc div1 exactament el lloc on voleu.
- Ajusteu l'alçada i l'amplada del div1 com a ' 250 píxels ' i ' 300 píxels ”.
- El valor de l'índex z s'estableix com a ' 1 ”.
- Estableix el color de fons del div1 com a ' rgb(4, 3, 75) ”.
CSS
.div1 {posició : absolut ;
alçada : 250 píxels ;
amplada : 300 píxels ;
índex z : 1 ;
fons : rgb ( 4 , 3 , 75 ) ;
}
Sortida
El primer div s'ha col·locat correctament. Ara, passem a la segona div.
Per superposar el div2, seguiu les instruccions donades:
- Estableix el valor de la propietat de la posició, l'amplada i l'alçada del div2 igual que el ' div1 ”.
- Estableix el valor de l'índex z com a ' 2 ” per situar-lo davant de la primera div.
- Estableix un color de fons diferent per al div2 com a ' rgb(0, 204, 255) ”.
- Estableix el marge de div2 com a ' 50 píxels ” com a valor del marge superior i del marge esquerre.
- Estableix l'opacitat de div2 com a ' 0.7 ”.
CSS
.div2 {posició : absolut ;
amplada : 300 píxels ;
alçada : 250 píxels ;
índex z : 3 ;
fons : rgb ( 0 , 204 , 255 ) ;
marge : 50 píxels ;
opacitat : 0.7 ;
}
Sortida
Div2 es solapa amb èxit amb div1.
Si voleu configurar div1 a sobre del div dos, només heu de canviar el valor de l'índex z. Vegem-ne un exemple.
Exemple 2: superposició de la primera div amb la segona
En aquest exemple, canviarem el valor de l'índex z dels dos divs. En el ' .div1 ” classe del fitxer CSS, establiu el valor de “ índex z 'propietat com' 2 ”:
índex z : 2 ;Després d'això, a la ' .div2 ”, establiu el valor de la classe “ índex z 'propietat com' 1 ”:
índex z : 1 ;Com a resultat, el primer div es col·locarà davant del segon div:
Hem compilat el mètode més fàcil per crear dos divs superposats amb CSS.
Conclusió
El ' posició ' i ' índex z ” s'utilitza per crear divs superposats en CSS. De manera predeterminada, el valor de l'índex z és 1, que indica que el div recent creat es col·locarà davant del div existent. Tanmateix, podeu especificar qualsevol valor segons els vostres requisits per ajustar la seqüència de superposició. En aquest article, hem ofert els mètodes per crear Divs superposats amb CSS.