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