1
<div></div>
<div></div>
<style>
div {
  width: 90px;
  aspect-ratio:1;
  border-radius:50%;
  transform:translateY(-15px);
  background:#191919;
  box-shadow:0 0 0 13px #E08027;
  position:relative;
}
  div::after{
  content:"";
  position:absolute;
  width:55px;
  height:55px;
  background:#E08027;
  top:-13;
  right:-13;
  z-index:-1;
}
</style>

I am trying to bring the ::after element to back of the parent div. But its not working, why z-index ain't work?

adramelech
  • 41
  • 4
  • Hello and welcome to Stack Overflow. Just to clear a minor confusion. There is no child div in this example. Neither div have any children, and they are also not a child of another div, at least by your presented example. This is an important distinction, because if I am to take your question literally, then what you are asking is not possible, simply because the `z-index` property will always be relative to the parent. However, since neither of these divs are in fact children of each other, you will be able to implement the functionality you seek. – Martin Nov 08 '21 at 16:58
  • the transform is the culprit – Temani Afif Nov 08 '21 at 20:03

2 Answers2

1
div { 
    position: relative;  /* optional */
    width: 100px;
    height: 100px;
    background-color: blue;
}

div::after {
    content: "";
    width: 150px;
    height: 150px;
    background-color: red;

    /* create a new stacking context */
    position: absolute;
    z-index: -1;  /* to be below the parent element */
}

Pseudo-elements are treated as descendants of their associated element. To position a pseudo-element below its parent, you have to create a new stacking context to change the default stacking order. Positioning the pseudo-element (absolute) and assigning a z-index value other than “auto” creates the new stacking context.

Biswajit Paloi
  • 569
  • 1
  • 13
0

Set position: relative on div::after selector, if you want to z-index works.

MarioG8
  • 3,423
  • 4
  • 6
  • 20