CSS z-index 无法使用 child-elements

Question

我试过一个个人项目做菜单，在最高层（z-index 3）打开，所以它们覆盖了我的板，但它们所在的 header 在最低层(z-index 1)，所以板被分配给 mid-layer (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 Sample

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 结构。或将 #header 的 z 索引设置为高于 <ol>

的 z 索引

Answer 2

那是因为ul父级（与ol处于同一级别）有z-index:1

如果您将 ul 和 ol 放在同一级别，它将按预期工作

CSS z-index 无法使用 child-elements

CSS z-index not working with child-elements

html

css

z-index

css-position