目录
z-index:
z-index:控制元素在z轴上显示的优先级。
z-index的默认值为auto。
可以设置为正整数,负整数。
z-index值大的元素会覆盖z-index值小的元素。
常见的无效情况:
1.没有设置定位
在使用z-index时,元素没有设置定位
2.子元素覆盖父元素
在这种情况实现父元素覆盖子元素,需要将子元素的z-index设置为负数,父元素的z-index为默认。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
#box1{
width: 200px;
height: 200px;
background-color: red;
position: absolute;
}
#box2{
width: 100px;
height: 100px;
background-color: blue;
position: absolute;
z-index: -1;
}
</style>
</head>
<body>
<div id = "box1">
<div id = "box2"></div>
</div>
</body>
</html>