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

Question

我有两个固定容器，#meta和#meta-container，其中#meta始终位于前台，因为它是一个全局控件元素。

我的代码看起来像这样

＆＃13;

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

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

这么久 - 快乐的编码。

（1）编辑：更正了代码段中的拼写。 Snippet现在正在工作（很遗憾不是我的代码）。

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>

Answer 2

#meta-container {
  position: relative;
  width:100%;
  height:100%;
  . . .
}

#meta {
  position: fixed;
  . . .
}

-

<div id="meta">
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>
    <span class="bar"></span>

    <div id="meta-container" class="slidein">
      ...
    </div>
</div>

Answer 3

#meta{
    border: 1px solid;
    width: 25%;
    position: absolute;
    z-index: 1;
 }
 
 #meta-container{
    border: 1px solid;
    width: 25%;
    color: red;
    position: relative;
}

<div id="meta">
  <span>
    meta box
  </span>
 
</div>

<div id="meta-container" class="slidein">
meta container box
</div>