Como resultado de leer este artículo, podrá crear divs superpuestos con CSS. Para ello, en primer lugar, aprenderemos sobre el “ posición ' y ' índice z ' propiedades.
¡Empecemos!
Propiedad de 'posición' de CSS
En HTML, puede establecer la posición de los elementos utilizando el ' posición ' propiedad. La posición final de un elemento en una página web está determinada por su derecha, izquierda, arriba, abajo y en combinación con las propiedades del índice z.
Sintaxis
La sintaxis de la propiedad de posición es:
posición : valor
En lugar de ' valor ”, puede establecer diferentes posiciones de elementos como absoluto, relativo, fijo y fijo.
Propiedad CSS 'índice z'
Los ' índice z La propiedad ” se utiliza para establecer el orden de pila de los elementos. El elemento que tiene el mayor valor de índice z se coloca delante de los demás.
Sintaxis
La sintaxis de la propiedad z-index es la siguiente:
índice z : auto |númeroEn la sintaxis anterior, “ auto ” se utiliza para establecer el orden de acuerdo con el elemento principal, mientras que para la secuencia manual, el “ número ” se establece como el valor de la propiedad del índice z.
Ahora, pasemos al ejemplo práctico de crear divs superpuestos con CSS.
Ejemplo 1: superposición de la segunda división con la primera
En la sección HTML, crearemos dos divs y asignaremos diferentes nombres de clase como ' div1 ' y ' div2 ”.
HTML
< cuerpo >< división clase = 'div1' >< / división >
< división clase = 'div2' >< / división >
< / cuerpo >
Ahora, vaya al CSS y siga las instrucciones dadas:
- Establezca el valor de la propiedad de posición como ' absoluto ” para el lugar div1 exactamente el lugar donde desea.
- Ajuste la altura y el ancho de div1 como ' 250px ' y ' 300px ”.
- El valor del índice z se establece como ' 1 ”.
- Establezca el color de fondo de div1 como ' rgb(4, 3, 75) ”.
CSS
.div1 {posición : absoluto ;
altura : 250px ;
ancho : 300px ;
índice z : 1 ;
antecedentes : RGB ( 4 , 3 , 75 ) ;
}
Producción
El primer div se coloca con éxito. Ahora, pasamos al segundo div.
Para superponer el div2, siga las instrucciones dadas:
- Establezca el valor de la propiedad de posición, el ancho y la altura del div2 igual que ' div1 ”.
- Establezca el valor del índice z como ' 2 ” para colocarlo delante del primer div.
- Establezca un color de fondo diferente para el div2 como ' rgb(0, 204, 255) ”.
- Establezca el margen de div2 como ' 50px ” como el valor de margen superior y margen izquierdo.
- Establezca la opacidad de div2 como ' 0.7 ”.
CSS
.div2 {posición : absoluto ;
ancho : 300px ;
altura : 250px ;
índice z : 3 ;
antecedentes : RGB ( 0 , 204 , 255 ) ;
margen : 50px ;
opacidad : 0.7 ;
}
Producción
Div2 se superpone correctamente con div1.
Si desea configurar div1 encima de div dos, solo necesita cambiar el valor del índice z. Veamos un ejemplo de esto.
Ejemplo 2: superposición de la primera división con la segunda
En este ejemplo, cambiaremos el valor del índice z de ambos divs. En el ' .div1 ” clase del archivo CSS, establezca el valor de “ índice z ” propiedad como “ 2 ”:
índice z : 2 ;Después de eso, en el “ .div2 ” clase, establezca el valor de la “ índice z ” propiedad como “ 1 ”:
índice z : 1 ;Como resultado, el primer div se colocará delante del segundo div:
Hemos compilado el método más fácil para crear dos divs superpuestos con CSS.
Conclusión
Los ' posición ' y ' índice z La propiedad ” se usa para crear divs superpuestos en CSS. De forma predeterminada, el valor del índice z es 1, lo que indica que el div recién creado se colocará delante del div existente. Sin embargo, puede especificar cualquier valor de acuerdo con sus requisitos para ajustar la secuencia superpuesta. En este artículo, hemos ofrecido los métodos para crear Divs superpuestos con CSS.