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 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-index高于<ol>

的z索引

Answer 2

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

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

CSS z-index不使用子元素

2 个答案: