<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>相对定位</title>
<style type="text/css">
.con{
width:300px;
height: 300px;
border:1px solid #000;
margin:50px auto 0;
}
.box01, .box02{
width:100px;
height:100px;
position:relative;
}
.box01{
background-color: green;
/*
距离原来的位置进行偏移
距离左边50px
距离上边30px
*/
left:50px;
top:30px;
}
.box02{
background-color: gold;
}
</style>
</head>
<body>
<div class="con">
<div class="box01"></div>
<div class="box02"></div>
</div>
</body>
</html>
解释:
绝对定位元素，元素脱离文档流，不占据文档流的位置，可以理解成：为漂浮的文档流上放，相对于上一个设置了定位的父级元素来进行定位，如果没有找到，则相对于body进行定位
特点：
绝对定位的练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>绝对定位</title>
<style type="text/css">
.con, .con1{
width: 300px;
height: 300px;
margin: 50px auto 0;
border:1px solid #000;
/*
如果不设置则子元素会根据body来进行定位
*/
position:relative;
}
.box1, .box2{
width:100px;
height:100px;
}
.box1{
/*不占用空间下方没有设置元素会移动上来*/
position:absolute;
left:50px;
top:20px;
background-color: green;
}
.box2{
background-color: gold;
}
.con1 div{
width:100px;
height:100px;
position:absolute;
}
.con1 .box01{
background-color: green;
top:10px;
left:10px;
z-index: 10
}
.con1 .box02{
background-color: gold;
top:20px;
left:20px;
z-index: 11
}
.con1 .box03{
background-color: blue;
top:30px;
left:30px;
z-index: 13
}
.con1 .box04{
background-color: yellowgreen;
top:40px;
left:40px;
}
.con1 .box05{
background-color: red;