具有z-index的元素不會隱藏具有較低z-index的元素

Question

這種z-index格式應該如何工作？ 我應該只能看到z-index為150的圖層，而不能看到其他任何圖層，但是我可以看到所有三個圖層，因為z-indez無法正常工作。 應該如何運作？

<!DOCTYPE html>
<html>
<head>

  <meta charset="UTF-8">
  <title>z-index</title>
  <!--Problem is that the z-index is not at all working-->

</head>
<body >
  <!--first div is with highest z-index, it should be on the top layer of the screen-->
  <div  style="  background-color: #000000 ;height:1000px;width:1000px;z-index:150">
    <!--second div is with 100 z-index, it should be on the middle layer of the screen-->
    <div style=" background-color: #d0d4db;height:500px;width:500px;z-index:100;">

      <!--third div is with 50 z-index, it should be on the lowest layer of the screen-->
      <div style=" background-color: #990a0a;height:100px;width:100px;z-index:50;">
      </div>
    </div>
  </div>
</body>
</html>

Answer 1

z-index只能與position: relative; 或position: absolute;

Answer 2

z-index屬性指定元素的堆棧順序。 具有較高堆疊順序的元素始終位於具有較低堆疊順序的元素之前。

注意： z-index僅適用於定位的元素（position：absolute，position：relative或position：fixed）。

我認為您也需要參考此鏈接

https://css-tricks.com/almanac/properties/z/z-index/

具有z-index的元素不會隱藏具有較低z-index的元素

問題描述

2 個解決方案

解決方案1
2 2016-12-17 06:34:56

解決方案2
2 2016-12-17 06:45:13

具有z-index的元素不會隱藏具有較低z-index的元素

問題描述

2 個解決方案

解決方案1 2 2016-12-17 06:34:56

解決方案2 2 2016-12-17 06:45:13

解決方案1
2 2016-12-17 06:34:56

解決方案2
2 2016-12-17 06:45:13