'CSS z-index not working with child-elements

Ive tried for a personal project to do menus, that are opened on highest layer (z-index 3) so they overlay my board, but the header in which they are is at lowest layer (z-index 1), so the board was assigned to mid-layer (z-index 2). Logically this looks fine to me, but menu is displayed as it was below z-index 2... Ive ran out of ideas how to fix that.

* {
  margin: 0;
  padding: 0;
}
#header {
  width: 512px;
  height: 256px;
  position: fixed;
  z-index: 1;
  background-color: red;
}
div>ul {
  width: 512px;
  height: 128px;
  position: fixed;
  z-index: 3;
  background-color: blue;
}
ol {
  width: 480px;
  height: 320px;
  margin: 32px 16px 0 16px;
  position: fixed;
  z-index: 2;
  background-color: green;
}
<div id="header">
  <ul></ul>
</div>
<ol>
</ol>

CodePen Sample

htmlcsscss-positionz-index


Solution 1:[1]

the z index of child elements is always the z index of the parent element you can only position the elements on same layers. So in your case every element inside #header will be on z-index 1 compared to the <ol> which is z-index 2.

z-index: 3 from the unsorted list would only work within the #header if the <ol> would also be inside that container.

<div id="header">
   <ul></ul>
   <ol>
   </ol>
</div>

So what you want to achieve is not possible in this case. you would have to change your html structuring. or set the z-index from #header higher than the z index from <ol>

Solution 2:[2]

That is because the ul parent(which is on the same level with ol) has z-index:1

If you put ul and ol on the same level it'll work as expected

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Doml The-Bread
Solution 2 Igor Ivancha

Related Questions