1.元素的position属性的值默认为static 就是没有定位，元素出现在正常的文档流中，，这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的, 使用相对定位时，就算元素被偏移了，但是他仍然占据着它没偏移前的空间, 绝对定位：position:absolute, 被设置了绝对定位的元素，在文档流中是不占据空间的，如果某元素设置了绝对定位，那么它在文档流中的位置会被删除.
2.父容器使用相对定位，子元素使用绝对定位后，这样的位置不再于浏览器左上角，而是相对于父容器左上角
3.相对定位和绝对定位需要top，right，bottom。Left使用来定制具体位置，这四个属性只有在该元素使用定位后才会生效，其他情况下无效。另外这四个属性同时只能使用相邻的两个，不能即使用上又使用下。或及时使用左，又使用右。
4.使用相对定位和绝对定位后，当频幕放大缩小，视图的位置也不会乱跑
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>布局</title>
<style type="text/css">
.main{
width: 100%;
height: 800px;
margin: auto;
}
.a{ width: 20%;
height: 50%;
background-color: red;
position: relative; } .b{
margin-top: -400px;
width: 50%;
height: 80px;
margin-left: 20%;
background-color: green;
}
.c{ width: 50%;
height: 320px;
margin-left: 20%;
top: 80px;
background-color: yellow; }
.d{
margin-top: -400px;
margin-left: 60%;
width: 20%;
height: 400px;
background-color: blue;
position: relative; }
.g{ height: 90%;
background-color: cyan; } .h{
position: absolute;
top: 20%;
height: 80%;
width: 100%;
background-color: orange; }
.f{
position: absolute;
top: 20%;
width: 100%;
height: 70%;
background-color: purple; }
</style>
</head>
<body>
<div class="main"> <div class="a">a
<div class="f">列表</div>
</div> <div class="b">b 图片</div> <div class="c">c
<div class="g">g</div> </div> <div class="d">d
<div class="h">h</div>
</div>
</div>
</body>
</html>
