z-index用于改变层叠顺序，数字大的先显示.
代码-->z-index: 1(数字可以任意,但为了以后修改方便，最好将前期的基础index值，设置的较大些，以便后期插入新元素。（例如10、或100的整倍数）);
<html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
/* .main{
position: relative;
right: 10px;
height: 350px;
float: left;
}*/
div{
width: 100px;
height: 100px;
}
.test1{
background-color: red;
position: absolute;
top: 20px;
left: 100px;
z-index: 30;
}
.test2{
background-color: green;
position: absolute;
top: 40px;
left: 120px;
z-index: 20;
}
.test3{
background-color: blue;
position: absolute;
top: 60px;
left: 140px;
z-index: 10;
}
</style>
</head>
<body>
<div class="main">
<div class="test1"></div>
<div class="test2"></div>
<div class="test3"></div>
</div>
作为父容器时，是使用相对定位还是绝对定位：
当父一级div中只有一组子元素的时候，使用relative(相对定位)或absolute(绝对定位)都可以达到移动效果。
但当父容器中还有其他组的子元素时，就要考虑是否破快文档流（是否使用absolute进行页面布局）
</body>
</html>
网友评论