1

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.

aderchox
  • 3,163
  • 2
  • 28
  • 37
  • can you edit an image of how do you want it inside ? – Anant Vikram Singh Mar 22 '20 at 02:40
  • @anantvikramSingh I want the top half of the red square go under the green square so that only its bottom half is visible. Is an image still needed? – aderchox Mar 22 '20 at 02:42
  • do you need that orange box, to do some thing or it will always be under green box ? – Anant Vikram Singh Mar 22 '20 at 02:58
  • @anantvikramSingh I'm not quite sure what you mean, could you please make that a bit more clear? But I'll try answering it based on what I guess you want to know. My final goal is to rotate(45deg) that smaller square and give it the same color as the bigger square so that it seems like it's really a part of the bigger square. It's not going to do anything more special than that. – aderchox Mar 22 '20 at 03:20

1 Answers1

2

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

candicecodes
  • 46
  • 2
  • Hi, thanks! I used negative margin instead and it's working now! But can you please explain a bit more so that I can accept is as the correct answer? What does transform have to do with the z axis?! – aderchox Mar 22 '20 at 03:31
  • 1
    From what I understand, transform and z-index alter the [stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context). – candicecodes Mar 22 '20 at 03:53
  • I should clarify, anything other than transform:none and z-index:auto will alter the stacking context. – candicecodes Mar 22 '20 at 03:54