1

I have: a main-div (#main) with an embedded popup-div (#popup) a sidepane-div (#sidepane) besides the main div

<div id='sidepane'>
</div>

<div id='background'>

 <div id='popup'>
 </div>

</div>

I want them to overlay each other according to a z-index: #main z-index:1, #sidepane z-index:2, #popup z-index:3

#sidepane {
  position: absolute;
  background-color: red;
  width: 200px;
  height: 200px;
  z-index: 2;
}

#background {
  position: absolute;
  background-color: green;
  width: 100%;
  height: 100%;
  z-index: 1;
}

#popup {
  position: absolute;
  background-color: blue;
  z-index: 3;
  left: 20px;
  top: 20px;
  width: 220px;
  height: 40px;
}

The problem seems to be, that I cannot make the #popup with z-index: 3 to overlay the #sidepane with z-index: 2, because it is itself part of #main with the lowest z-index.

Is there a way to solve this problem without having to touch the z-index of #main and without having to move #popup out of #main?

https://jsfiddle.net/0qg8jmtz/

Lokomotywa
  • 2,624
  • 8
  • 44
  • 73
  • no you cannot, if you are not able to remove z-index or any properties that create stacking context you cannot make popup to be higher on itself – Temani Afif May 27 '19 at 11:25

0 Answers0