<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<!--定位叠放次序 z-index-->
<!--在使用定位布局时,可能出现盒子重叠的情况,此时,可以使用z-index 来控制盒子的前后次序(z轴)-->
<!--语法:-->
<!--选择器{z-index: 1;}-->
<!--数值可以是正整数、负整数或者零,默认时auto,数值越大,盒子约考上-->
<!--如果属性值相同,则按照书写顺序,后来局上-->
<!--数字后面不能加单位-->
<!--只有定位的盒子才有z-index属性-->
<style>
.box {
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 200px;
}
.xiangda {
background-color: red;
z-index: 1;
}
.xionger {
background-color: green;
left: 50px;
top: 50px;
}
.qiangge {
background-color: blue;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<div class="box xiangda">熊大</div>
<div class="box xionger">熊二</div>
<div class="box qiangge">光头强</div>
</body>
</html>
10-25
206
10-17
1592