兩個固定元素的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）編輯：更正了代碼段中的拼寫。 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>