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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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