0

All elements should be absolute position!

What needs to be achieved is that the element "child1" (z-index: 3;) is above "child2" (z-index: 2), both should be in the parent div (z-index: 1;).

How to make this possible?

Code:

  #parent {
  width: 300px;
  height: 300px;
  background: blue;
  position: absolute;
  top: 30px;
  left: 30px;
  z-index: 1;
}

#child1 {
  width: 150px;
  height: 150px;
  background: red;
  position: absolute;
  top: 80px;
  left: 80px;
  z-index: 3;
}

#child2 {
  width: 100px;
  height: 100px;
  background: green;
  position: absolute;
  top: -30px;
  left: -30px;
  z-index: 2;
<div id="parent">
  <div id="child1">
    <div id="child2"></div>
  </div>
</div>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415
maja
  • 177
  • 1
  • 13
  • remove z-index from child1 and add z-index:-1 to child2 – Temani Afif Apr 10 '20 at 10:55
  • Temani Afif Thank you for your reply. All elements need to have a z-index... By seeing you closed the question .., I would ask you to approach the question because I really need this – maja Apr 10 '20 at 10:59
  • read the duplicate to see why the child1 need to have its z-index removed – Temani Afif Apr 10 '20 at 11:00
  • I have read that and other posts and tutorials .. maybe someone comes up with some additional idea maybe find a way to solve this with javascript or simply with css or something like that ... – maja Apr 10 '20 at 11:02
  • take the time to read and understand the duplicate. All what you need is there – Temani Afif Apr 10 '20 at 11:03
  • In this text the description states that it is not possible... – maja Apr 10 '20 at 11:53

0 Answers0