I have this...
this is my 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>
And this is my 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;
}
Well, the problem is this... The green is supposed to be a ::before element of the .body, I want to put the red element ON TOP of the green one... but I can't. I tried with Z-index but it doesn't work... I don't know why.
I mean, it looks something like this...
It only remains to change some declarations and add another one and that's it.
The parent container of
::before
is.body
, and this parent container must be positionally relative, and need not havez-index
any value.The pseudo -element
::before
lacked absolute position, to be placed above its parent (that's why its parent must be relative), but with thez-index
value -1, it is placed behind its parent.