Search code examples
cssz-indexpseudo-element

z-index on positioned pseudo element (after) not working

here's the code:

<html>
<head>
  <style>
    .dad {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      background: greenyellow;
      width: 100px;
      height: 100px;
      z-index: 2;
    }
    .dad::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 10px;
      width: 20px;
      height: 20px;
      background: tomato;
      z-index: -1;
    }
  </style>  
</head>
<body>
  <div class="dad">
  </div>
</body>
</html>

I want to force that little tomato square to go under the green square(so that only the bottom half of the tomato square remains visible), how can I get it to work? I've searched and read about possible reasons this is happening and I've tried a number of fixes without success(, also some questions and answers were too messy and cryptic). Thanks in advance.

Solution

  • If you remove the transform and z-index from .dad, the red square will be under the green square.