Z-indexnot working on pseudo-elements

Hello team, I am working on some pseudo-elements with backgroung-images, and my problem is that no matter if i set the ::before and the ::after with pisition: absolute and z-index lower than the parent element, they don't go under the parent element covering my patent element. Why is that? And how can i solve it?
.tartkozep::before {
content: " ";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: -20px;
z-index: -1;
background-image: url('/tart-szel.jpg');
background-repeat: no-repeat;
background-size: contain;
}

.tartkozep::after {
content: " ";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 350px;
z-index: -1;
background-image: url('/tart-szel.jpg');
background-repeat: no-repeat;
background-size: contain;
}

.tartkozep {
margin: 0 0;
width: 100%;
position: relative;
top: 20px;
left: 0px;
z-index: 1;
background-image: url('/tart-kozep.jpg');
background-size: contain;
background-repeat: repeat-y;
height: 420px;
}
.tartkozep::before {
content: " ";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: -20px;
z-index: -1;
background-image: url('/tart-szel.jpg');
background-repeat: no-repeat;
background-size: contain;
}

.tartkozep::after {
content: " ";
display: block;
width: 100%;
height: 100%;
position: absolute;
top: 350px;
z-index: -1;
background-image: url('/tart-szel.jpg');
background-repeat: no-repeat;
background-size: contain;
}

.tartkozep {
margin: 0 0;
width: 100%;
position: relative;
top: 20px;
left: 0px;
z-index: 1;
background-image: url('/tart-kozep.jpg');
background-size: contain;
background-repeat: repeat-y;
height: 420px;
}
3 Replies
b1mind
b1mind2y ago
Kevin Powell
YouTube
Solve your z-index issues | z-index and stacking context explained
While it would be handy (at times) for z-index to be a global value, the truth is, it isn't. It's related to its local stacking context, which can be created by a parent with its own z-index value, but also by other properties such as transform, opacity, and many more, which is something most people aren't aware of. In this video, I look at wha...
Kevin Powell
Kevin Powell2y ago
yeah, the parent there is creating a new stacking context with the z-index on there, so there's no way the children can escape it.
StoicWanderer
StoicWanderer2y ago
Hi Kevin, the code snippet i have given has a parent div and I had to give that parent div a position: relative and a z-index:0 to make it work as ai want it to. Now the pseudo elements are behind the .tartkozep div background image. It is weird though that it works like this, but it's ok now Thank you for your and @b1mind help
Want results from more Discord servers?
Add your server