0

in the code below, element B moves in front of element A
when assigned the "position" property (relative or absolute).

Yet I do not touch the z-index.

what is the "theoretical" explanation?

https://jsbin.com/sicojegelo/edit?html,css,output

.A {
  top: 45px;
  left: 35px;
  width: 150px;
  height: 30px;
  position: absolute;
  z-index: 0 ;
  background-color: green;
}
.B {
  /*
  why when we remove the "_" ,
  the div A (green) is placed in front of the div B (gray) ?
  */
  _position:absolute;
  
  background-color:gray;
  width: 170px;
  height: 100px;
}
.C {
  top: 25px;
  left: 25px;
  width: 50px;
  height: 30px;
  position: absolute;
  z-index: 5;
  background-color: blue;
}
<!DOCTYPE html>
<html>
<body>
  <div class="A"></div>
  <div class="B">
    <div class="C"></div>
  </div>
</body>
</html>
oceanGermanique
  • 336
  • 3
  • 16
  • This likely because position absolute rendered differently then any other position https://stackoverflow.com/questions/33931309/why-absolutely-positioned-elements-render-over-previous-absolutely-positioned-el – antokhio Sep 25 '22 at 12:41

0 Answers0