具有z-index的元素不隐藏具有较低z-index的元素

时间:2016-12-17 06:32:29

标签: html css z-index

这个z-index格式如何工作?我应该只能看到z-index150的图层,而不是其他任何图层,但我能够看到所有三个图层,因为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>

2 个答案:

答案 0 :(得分:2)

z-index只能与position: relative;position: absolute;

一起使用

答案 1 :(得分:2)

z-index属性指定元素的堆栈顺序。堆栈顺序较大的元素始终位于堆栈顺序较低的元素前面。

注意: z-index仅适用于定位元素(位置:绝对,位置:相对或位置:固定)。

我认为您还需要参考此链接

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