Kevin Powell - Community•15mo ago

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•15mo ago

https://youtu.be/uS8l4YRXbaw

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•15mo 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•15mo 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

Gaming

Programming

Z-indexnot working on pseudo-elements