element::after z-index not working for it

Question

hey i have a problem with this code:

#selector{
  width:100%;
  height:100px;
  background-color:#333;
  position: fixed;
  transform: translate(50%);
  right: 50%;
  top: 10px;
  width: 95%;
  z-index: 20;
}

#selector::after{
    content: '';
    width: 95%;
    height: 10px;
    position: absolute;
    right: 50%;
    bottom: -4px;
    border-radius: 5px;
    transform: translate(50%);
    background: #3D74FE;
    z-index: -1;
}

<div id="selector"></div>

u can see that i have a z-index for #selector::after, but it doesn't work and it doesn't go behind my #selector!!!

score 0 · Answer 1 · answered May 16 '22 at 18:24

Child z-index does not work for its parent

Solution:

#selector{
  width:100%;
  height:100px;
  transform: translate(50%);
  right: 50%;
  top: 10px;
  width: 95%;
  position: relative;
}

#selector::before{
  content: '';
  width:100%;
  height:100%;
  background-color:#333;
  position: absolute;
  right: 0;
  top: 0;
}

#selector::after{
    content: '';
    width: 95%;
    height: 10px;
    position: absolute;
    right: 50%;
    bottom: -4px;
    border-radius: 5px;
    transform: translate(50%);
    background: #3D74FE;
    z-index: -1;
}

score 0 · Answer 2 · answered May 16 '22 at 18:36

z-index will not work if you have transform property*.

position property is anything other than static, relative, absolute*.

*See reference.

You can remove z-index from parent element (where it should be above blue line). (Reference).

So, new CSS is:

#selector{
  width:100%;
  height:100px;
  background-color:#333;
  position: relative;
  /*transform: translate(50%);*/
  /*right: 50%;
  top: 10px;*//* use margin */
  width: 95%;
  /*z-index: 20;*/
  margin: 0 auto;
}

#selector::after{
    content: '';
    width: 95%;
    height: 10px;
    position: absolute;
    right: 50%;
    bottom: -4px;
    border-radius: 5px;
    transform: translate(50%);
    background: #3D74FE;
    z-index: -1;
}

<div id="selector"></div>

See it on jsfiddle.

element::after z-index not working for it

2 Answers2