Cómo crear divs superpuestos con CSS

En CSS, puede crear divs superpuestos utilizando el "posición" y "índice z" propiedades. La propiedad de posición CSS establece la posición del DIV o el contenedor, mientras que la propiedad del índice Z se puede utilizar para definir la secuencia DIV. En tal escenario, el DIV tiene el mayor valor del índice Z se coloca frente al segundo.

Como resultado de leer este artículo, podrá crear divs superpuestos con CSS. Para este propósito, primero, aprenderemos sobre el "posición" y "índice z" propiedades.

Empecemos!

Propiedad de "posición" 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, superior, inferior 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 pegajoso.

Propiedad CSS "Index Z"

El "índice zLa propiedad se utiliza para establecer el orden de pila de elementos. El elemento que tiene un mayor valor del índice z se coloca frente a los otros.

Sintaxis

La sintaxis de la propiedad del índice Z es la siguiente:

Index Z: Auto | Número

En la sintaxis dada anteriormente, "auto"Se usa 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: Superpente del segundo div con el primer

En la sección HTML, crearemos dos divs y asignaremos diferentes nombres de clase como "div1" y "div2".

Html

Ahora, muévase 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 quieres.
• Ajuste la altura y el ancho del Div1 como "250px" y "300px".
• El valor del índice Z se establece como "1".
• Establezca el color de fondo del 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, nos movemos 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 el "div1".
• Establezca el valor del índice Z como "2"Para colocarlo frente al primer div.
• Establezca un color de fondo diferente para el Div2 como "RGB (0, 204, 255)".
• Establezca el margen de Div2 como "50px"Como valor de margen y margen-izquierda.
• 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 con éxito con Div1.

Si desea establecer Div1 encima del Div Two, solo necesita cambiar el valor del índice Z. Veamos un ejemplo de esto.

Ejemplo 2: superposición del primer div con el segundo

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 del"índice z"Propiedad como"1":

índice z: 1;

Como resultado, el primer div se colocará frente al segundo div:

Hemos compilado el método más fácil para crear dos divs superpuestos con CSS.

Conclusión

El "posición" y "índice zLa propiedad se usa para crear divs superpuestos en CSS. Por defecto, el valor del índice Z es 1, que establece que el DIV recién creado se colocará frente al 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.