这个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>
答案 0 :(得分:2)
z-index只能与position: relative;
或position: absolute;
答案 1 :(得分:2)
z-index属性指定元素的堆栈顺序。堆栈顺序较大的元素始终位于堆栈顺序较低的元素前面。
注意: z-index仅适用于定位元素(位置:绝对,位置:相对或位置:固定)。
我认为您还需要参考此链接