CSS z-index 不适用于子元素

Question

我尝试过一个个人项目来制作菜单，这些菜单在最高层（z-index 3）上打开，因此它们覆盖了我的板，但它们所在的标题位于最低层（z-index 1），因此板是分配给中间层（z-index 2）。从逻辑上讲，这对我来说看起来不错，但菜单显示为低于 z-index 2...我已经没有办法解决这个问题了。

* {
  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 示例

Answer 1

子元素的 z 索引始终是父元素的 z 索引，您只能将元素放置在同一层上。因此，在您的情况下，与哪个元素相比，里面的每个元素#header都会打开。z-index 1<ol>z-index 2

z-index: 3来自未排序列表的内容仅在#header该<ol>容器内有效。

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

所以在这种情况下你想要实现的目标是不可能的。你必须改变你的 html 结构。或将 z 索引设置为#header高于 z 索引<ol>