html - 两个固定元素上的 z-index 不起作用

Question

我有两个固定的容器，#meta 和 #meta-container，其中 #meta 应该总是在前台，因为它是一个全局控制元素。

我的代码是这样的

#meta-container {
  position: fixed;
  z-index: 1;
  left: 0; right:0;
  bottom:0; top: 0;
  background-color: red;
  color: rgba(0, 0, 0, 0.87);
}

#meta {
  position: fixed;
  z-index: 2;
  top: 40%;
  width: 60px;
  height: 25px;
  display: flex;
  background-color: black;
}

<div>
  <span id="meta">
      <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
  <span class="bar"></span>
  </span>
  #meta
</div>
<div id="meta-container" class="slidein">
  #meta-container
</div>

但是 span#meta 没有显示在 div#meta-container 之上。我没有在某处重新分配 z-index 。我还更改了 z-index 值以进行测试，但没有帮助。我做错了什么？

再见 - 编码愉快。

(1) 编辑:更正了代码片段中的拼写。片段现在可以使用(不幸的是不是我的代码)。

Answer 1

您需要做的就是添加 top 和 left 样式来覆盖它们:

#meta-container {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}

#meta {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
}

<div>
  <span id="meta">
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
      <span class="bar"></span>
  </span>
  bbbbbbbbbbbbbbbbbbbbbbbbbbbbb
</div>
<div id="meta-container" class="slidein">
  aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>