uno sobre otro div superposición div con CSS

Aquí, vamos a aprender cómo de superposición div uno sobre otro div con CSS (Cascading Style Sheet)?

Introducción:

Divs, una palabra muy común y muy conocida en el campo de desarrollo web. Sin sitio web o página web puede ir a ser funcional sin el uso de al menos un div. Es una habilidad básica para aprender cómo implementar o crear divs en un sitio web o una página web. Pero ¿cuáles son divs? Aunque hemos oído este término con bastante frecuencia e incluso usarlo de forma regular, mientras que el desarrollo de la página web o en la web. Los divs no son más que ayuda en la creación de secciones de su código HTML class sus páginas web o sitios web. Esa es la definición más simple y comprensible de divs y no hay nada más añadiendo a la misma.

Anécdota:

Los divs puede ser declarado tener muchas clases que se utilizan a continuación en el estilo CSS for. Es el trabajo de estos divs que podemos labrar nuestra página web y sitios web. Divs son también conocidos como los encabezados que comienzan con una etiqueta de apertura y luego se cierra con una etiqueta de cierre. Divs no son más difíciles de crear debe ser la creación de tantos divs en sus sitios web o páginas web. Div también se utilizan para separar las líneas de código también, ya que ayuda en la creación de secciones, por tanto, su código se ve limpio y completo. El propósito de hacer que el código general es que si se le da el código para otra persona esa persona puede entender su código sin poner muchos esfuerzos y que se puede lograr mediante el uso de divs.

tema que nos ocupa:

Ahora que hemos hablado tanto de divs y su importancia en el sitio web o el desarrollo de páginas web, ¿por qué no pensamos en el tema aquí un poco? ¿Cómo podemos superponer uno sobre otro div div con CSS? Nos ocupamos de divs con regularidad y a veces se hace necesario superponer un div con otro. Para llevar a cabo o lograr esto nos permite avanzar en la solución.

Solución:

No hay mucho que hacer para lograr este método, todo lo que tienes que hacer es hacer uso de propiedad de posición CSS con la ayuda de z-index para superponer uno div sobre otro elemento div . Pero ¿cuál es el papel de índice Z aquí? Bueno, Z-index está siendo for usado para determinar el orden de apilamiento de elementos posicionados . for ejemplo, los elementos cuya posición valor es cualquiera de los siguientes: absoluta, fija o relativa.

Sintaxis:

    Element{
position:absolute|fixed|relative;
z-index:value;
}

Ejemplo:

<!DOCTYPE html>
<html>
<head>
<style>
.box {
width: 250px;
height: 250px;
position: relative;
}
.box1 {
width: 100%;
height: 100%;
position: absolute;
opacity: 0.8;
}
.box2 {
z-index: 10;
margin: 40px;
}
</style>
</head>
<body>
<div class="box">
<div class="box1" style="background: #f40;"></div>
<div class="box1 box2" style="background: #006969;"></div>
</div>
</body>
</html>

salida

Overlay one div over another div using CSS - 4

En el ejemplo anterior, una caja div superpone otra caja div .


Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *