1

Tengo esto...

introducir la descripción de la imagen aquí

Este es mi HTML

<section class="container-body" id="container_body">
    <div class="header">
        <button onclick="cargar();">Abrir</button>
    </div>
    <div class="body">
        <div class="content">
            
        </div>
    </div>
</section>

Y este es mi css...

.container-body{
width: 100%;
background: var(--smoke);
padding-left: 270px;
transition: .6s;
box-shadow: 200px -146px 400px 0px rgba(0,0,0,1);
}
.agrandar-body{
padding-left: 60px;
transition: .6s;
}
.container-body .header{
height: 100px;
background: var(--white);
display: flex;
align-items: center;
border-bottom: 2px solid var(--secondary);
}

.container-body .body{
height: 700px;
display: block;
z-index: 9;
}
.container-body .body::before{
content: "";
position: relative;
top: 0px;
width: 100%;
height: 160px;
background: var(--secondary);
display: block;
z-index: 9;
}
.container-body .body .content{
background: red;
z-index: 999;
display: flex;
margin: 0px 30px 30px 30px;
height: 1000px;
}

Bien, el problema es el siguiente... Se supone que lo verde es un elemento ::before del .body, Lo que quiero es poner el elemento rojo ENCIMA del verde... pero no lo logro. Intente con Z-index pero no funciona... No se porque.

Osea, que se vea algo asi...

introducir la descripción de la imagen aquí

1 respuesta 1

2

Solamente falta cambiar algunas declaración y agregar otro más y ya esta.

El contenedor padre de ::before es .body, y este contenedor padre debe ser de posición relativa, y no es necesario que tenga z-index de ningún valor.

Al pseudoelemento ::before le faltaba posición absoluto, para colocar encima de su padre (por eso su padre debe ser de posición relativo), pero con el z-index de valor -1, se coloca detrás de su padre.

.container-body{
width: 100%;
background: var(--smoke);
padding-left: 270px;
transition: .6s;
box-shadow: 200px -146px 400px 0px rgba(0,0,0,1);
}
.agrandar-body{
padding-left: 60px;
transition: .6s;
}
.container-body .header{
height: 100px;
background: var(--white);
display: flex;
align-items: center;
border-bottom: 2px solid var(--secondary);
}

.container-body .body{
position: relative;
height: 700px;
display: block;
z-index: 1;
}
.container-body .body::before{
content: "";
position: absolute;
top: 0px;
width: 100%;
height: 160px;
background: lightgreen;
display: block;
z-index: -1;
}
.container-body .body .content{
background: red;
z-index: 999;
display: flex;
margin: 0px 30px 30px 30px;
height: 1000px;
}
<section class="container-body" id="container_body">
<div class="header">
    <button onclick="cargar();">Abrir</button>
</div>
<div class="body">
    <div class="content">
        
    </div>
</div>
</section>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.