Z索引堆疊上下文

Question

我遇到了z-index聽起來不那么簡單的問題。

在基本閱讀了我發現的所有內容之后，我仍然找不到解決方案。 所以這是我的問題：

的jsfiddle

<div id="first">
 <div id="middlelayer">
   2
 </div> 
</div>
<div id="second">
  <div id="toplayer">
    1
  </div>
  <div id="lowestlayer">
    3
  </div>
</div>

我希望另一個父級（#middlelayer）的Div介於其他兩個Divs（#toplayer和#lowestlayer）之間。 我已經對z-indice的每種組合進行了實驗結束，還嘗試了不透明度為.99的變通辦法，如下所述：

https://philipwalton.com/articles/what-no-one-told-you-about-z-index/

到目前為止，似乎一切都沒有，我希望您能幫助我。

提前非常感謝您！

Answer 1

 .toplayer { width: 120px; background-color: green; position: fixed; z-index: 3; } #middlelayer { width: 140px; background-color: blue; position: fixed; z-index: 2; } #lowestlayer { width: 160px; background-color: yellow; position: fixed; } 

 <div id="first" > <div id="middlelayer"> middle </div> </div> <div id="second"> <div id="second2"> <div id="lowestlayer"> low </div> <div class="toplayer"> top </div> </div> </div> 

我只是將z-index:1添加到z-index:3到每個元素，它似乎產生了預期的效果。

編輯：

從我的答案中刪除了JSFiddle，並用代碼段替換了它。

Answer 2

它似乎不是z-index問題，而是定位問題之一。 由於您使用的是fixed定位，因此請記住，元素是相對於視口定位的。 要獲得想要設置在top ， top和bottom （最后要居中）的結果，請使用稱為絕對居中的小技巧。

這是您可以在JSFiddle上看到的示例...

https://jsfiddle.net/kennethcss/smejLps4/

更新：

如果想要的結果只是簡單地“層疊”元素，則只需要像這樣應用z-index ...

的jsfiddle

Answer 3

我認為這就是您所需要的。 請檢查以下代碼。

 #lowestlayer { opacity: .99; } #lowestlayer, #middlelayer, #toplayer { position: absolute; width: 100px; color: white; line-height: 100px; text-align: center; } #lowestlayer { z-index: 1; top: 20px; left: 20px; background: red; width: 200px; height: 200px; } #middlelayer { top: 45px; left: 45px; background: green; z-index: 2; width: 150px; height: 150px; } #toplayer { top: 70px; left: 70px; background: blue; z-index: 3; width: 100px; height: 100px; } 

 <div id="first"> <div id="middlelayer"> 2 </div> </div> <div id="second"> <div id="toplayer"> 1 </div> <div id="lowestlayer"> 3 </div> </div>