0

I am facing an issue with the stacking order of div element with its pseudo-elements ::before and ::after.

In the below code, I have commented this line of code which says, transform: translate(10px, 10px); so it works as expected but if after uncommenting this then div goes behind its pseudo-elements. I am currently learning about z-index and stuck at this problem and I don't know why this problem is occurring.

Any help would be appreciated.

* {
  margin: 0;
}
body {
  background-color: #000d;
}
div {
  width: 100px;
  height: 100px;
  background: black;
  border: 3px solid #fff;
  border-radius: 100%;
  position: relative;
  /* transform: translate(10px, 10px); */
}
div::before,
div::after {
  content: "";
  width: inherit;
  height: inherit;
  border: inherit;
  border-radius: inherit;
  position: absolute;
  display: block;
}
div::before {
  background: red;
  left: 20px;
  top: 20px;
  z-index: -1;
}
div::after {
  background: blue;
  left: 40px;
  top: 40px;
  z-index: -2;
}
<div></div>

I have tried above code to stack the div to top using z-index with transform.

Adam
  • 5,495
  • 2
  • 7
  • 24
Mohammad Shahanwaz
  • 3
  • 1
  • This is all to do with stacking contexts. transform creates its own stacking context. This is explained here: https://stackoverflow.com/questions/20851452/z-index-is-canceled-by-setting-transformrotate – Adam Dec 30 '22 at 12:15

0 Answers0