1

I have a dom element within a dom element within a dom element. So basically 3 levels.

I am trying to get the middle level (level 1) to be on top of all. I tried setting a high z-index but it doesn't work.

Assuming I cannot change the structure, how could I achieve this?

.level-0 {
  z-index: 5;
  float: left;
  background-color: red;
  width: 100px;
  height: 100px;
  margin: 10px;
}

.level-1 {
  position: relative;
  z-index: 50;
  float: left;
  background-color: blue;
  width: 50px;
  height: 50px;
  margin: 10px;
}

.level-2 {
  z-index: 2;
  float: left;
  background-color: green;
  width: 50px;
  height: 50px;
  margin: 10px;
}
<div class="level-0">
  Level 0
  <div class="level-1">
    level 1
    <div class="level-2">
      level 2
    </div>
  </div>
</div>
0stone0
  • 34,288
  • 4
  • 39
  • 64
strangeQuirks
  • 4,761
  • 9
  • 40
  • 67
  • I think you should take a look at this discussion: https://stackoverflow.com/questions/2503705/how-to-get-a-child-element-to-show-behind-lower-z-index-than-its-parent. An easy solution would be to use absolute position – Ivan Beliakov Jan 31 '23 at 16:25

0 Answers0