演示代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="reset.css"/>
<style type="text/css">
.box{width: 302px;height: 302px;border: 1px solid #000000;margin: 50px auto;position: relative;}
.pst1,.pst2,.pst3{width: 100px;height: 100px;}
.pst1{
background-color: #ff0000;
position: absolute;
left: 0;
top: 0;
}
.pst2{
background-color: #00ff00;
position: absolute;
left: 40px;
top: 40px;
z-index: 1;
}
.pst3{
background-color: #0000ff;
position: absolute;
left: 80px;
top: 80px;
}
</style>
</head>
<body>
<!--
定位:规定元素的位置。用于没有规律元素的布局。
定位三种类型:相对定位、绝对定位、固定定位
定位使用方法:
1,规定哪一种定位方法
2,指定在方向上的偏移量(top、bottom、left、right)
3,注意,top和bottom同时设置只有一个方向生效,left和right也一样;left和top优先
-->
<!--
层级:z-index: 数字;
1,每一个定位元素会独占一层
2,改变层级来改变定位元素堆叠顺序
3,层级数字越大,层级越高,越往上,默认值0
4,当层级一样,后写元素会盖住先写元素,后来居上
-->
<div class="box">
<!-- div.pst$*3 -->
<div class="pst1"></div>
<div class="pst2"></div>
<div class="pst3"></div>
</div>
</body>
</html>