相对定位：relative
绝对定位：absolute
固定定位：fixed
以上定位都可以使用top,bottom,left,right来移动
<html>
<head>
<title>css的定位</title>
<meta charset="UTF-8"/>
<style type="text/css">
#div01{
border:solid 2px orange;
height:300px;
width:800px;
margin-bottom:10px;
margin-top:50px;
/*给父级添加相对定位，就会使子标签的绝对定位变成父级的*/
position:relative;
}
#showdiv{
border:solid 3px;
height:50px;
width:50px;
/*绝对定位
默认参照点是网页
若父级元素上加了position:relative;，参照点就是父级元素*/
position:absolute;
top:10px;
}
#div02{
border:dashed 2px coral;
height:300px;
width:800px;
margin-bottom:10px;
/*使用相对定位，相对的是原来这个div所在的位置，再向定义的方向移动指定的位移（top,bottom,left,right）
这个就和其他两个不在一个层级上，就可以挪位置
前面空出的位置是可以写东西的*/
position:relative;
left:100px;
top:100px;
background-color:coral;
z-index:2
}
#div03{
border:solid 2px gray;
height:300px;
width:800px;
margin-bottom:10px;
position:relative;
background-color:gray;
z-index:3;
}
#div04{
border:solid 2px blue;
height:50px;
width:50px;
/*固定定位
将元素固定显示在页面的指定位置，不会随着滚动条的滚动而移动*/
position:fixed;
top:270px;
right:10px;
}
</style>
</head>
<body>
<div id="div01">
<div id="showdiv">
</div>
</div>
<div id="div02"></div>
<div id="div03"></div>
<div id="div04"></div>
</body>
</html>