层级的引入
元素开启定位之后会提升自己的层级。
无论是什么定位,提升后的层级都是一样的,所以后面的开启定位给的元素会盖住前面的开启定位的元素。
eg
:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.box1{
width: 200px;
height: 200px;
background-color: salmon;
position: absolute;
}
.box2{
width: 200px;
height: 200px;
background-color: rgb(57, 194, 103);
position: absolute;
top: 50px;
left: 50px;
}
.box3{
width: 200px;
height: 200px;
background-color: rgb(134, 114, 250);
position: absolute;
top: 100px;
left: 100px;
}
.box4{
width: 200px;
height: 200px;
background-color: rgb(255, 227, 103);
position: absolute;
top: 150px;
left: 150px;
}
.box5{
width: 200px;
height: 200px;
background-color: rgb(255, 202, 103);
position: relative;
top: 200px;
left: 200px;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
<div class="box5"></div>
</body>
</html>
输出:
定位元素层级的修改
对于开启了定位元素,可以通过z-index
属性来指定元素的层级。
规则:
- z-index需要一个整数作为参数,值越大元素的层级越高,元素的层级越高越优先显示
- 如果元素的层级一样,则优先显示靠下的元素
- 祖先的元素的层级再高也不会盖住后代元素
eg:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
body{
font-size: 50px;
}
.box1{
width: 200px;
height: 200px;
background-color: salmon;
position: absolute;
z-index: 5;
}
.box2{
width: 200px;
height: 200px;
background-color: rgb(57, 194, 103);
position: absolute;
top: 50px;
left: 50px;
z-index: 4;
}
.box3{
width: 200px;
height: 200px;
background-color: rgb(134, 114, 250);
position: absolute;
top: 100px;
left: 100px;
z-index: 3;
}
.box4{
width: 200px;
height: 200px;
background-color: rgb(255, 227, 103);
position: absolute;
top: 80px;
left: 80px;
z-index: 2;
}
.box5{
width: 200px;
height: 200px;
background-color: rgb(255, 202, 103);
position: relative;
top: 200px;
left: 200px;
z-index: 1;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3
<div class="box4">4</div>
</div>
<div class="box5">5</div>
</body>
</html>