如果定位元素的层级是一样，则下边的元素会盖住上边的
通过z-index属性可以用来设置元素的层级
- 可以为z-index指定一个正整数作为值，该值将会作为当前元素的层级
- 层级越高，越优先显示
- 对于没有开启定位的元素不能使用z-index
- 父元素的层级再高，也不会盖住子元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.box1{
width: 200px;
height: 200px;
background-color: red;
position: relative;
z-index: 211;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
/*开启绝对定位*/
position: absolute;
/*设置偏移量*/
top: 100px;
left: 100px;
z-index: 5;
}
.box3{
width: 200px;
height: 200px;
background-color: yellowgreen;
/*position: relative;
z-index: 3;*/
position: absolute;
top: 200px;
left: 200px;
z-index: 15;
}
</style>
</head>
<body style="height: 5000px;">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
</body>
</html>
预览:
image.png
网友评论