图层顺序调整属性(z-index)
z-index 只对定位元素有作用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>z-index</title>
<style>
.box {
width: 600px;
height: 350px;
margin: 100px auto;
border: 2px solid blue;
position: relative;
}
.box div {
width: 300px;
height: 300px;
text-align: center;
line-height: 300px;
font-size: 80px;
position: absolute;
}
.box .box1 {
background-color: palevioletred;
left: 20px;
top: 10px;
z-index: 1000;
}
.box .box2 {
background-color: purple;
left: 270px;
top: 30px;
z-index: 999;
}
.box .box3 {
background-color: brown;
left: 120px;
top: 50px;
z-index: 5;
}
</style>
</head>
<body>
<div class="box">
<div class="box1">xiao mei</div>
<div class="box2">da huai dan</div>
<div class="box3">xiao mei</div>
</div>
</body>
</html>
z-index
本文标题：图层顺序调整属性(z-index)
本文链接：https://www.haomeiwen.com/subject/dbtniftx.html
网友评论