如何使用css中position的相对定位和绝对定位？
position属性可以设置元素的定位方式，默认是static, 常用属性relative、absolute、fixed。在实际项目开发中，这三个属性值是非常常用的。html中，元素从上到下依次排列，如果需要让一个元素堆叠在另一个元素上，那么就需要position这个属性了。
属性值relative
它让元素变成相对定位，它相对的是元素自身位置来定位的，而且使用了relative定位后，原来的位置会一直占用，也就是说它下面的元素是不会移上来的。
例子:
html部分
<div class="parent">
<div class="a">
元素A
</div>
<div class="b">
元素B
</div>
</div>
css部分
.a {
width: 200px;
height: 200px;
background-color: green;
}
.b {
width: 50px;
height: 50px;
background-color: yellow;
}
效果如下图
现在我们给元素A设置position:relative, 并调整一下位置，向右移20px
.a {
position: relative;
left: 20px;
width: 200px;
height: 200px;
background-color: green;
}
如下图可以看到，元素A移动了20px，下面的元素B并没有移上来
属性值absolute
它让元素变成绝对定位，且相对于除static定位以外的一个有定位的（relative,absolute,fixed等）父元素定位，如果没有这样的一个父元素，那就找祖先元素，一直往上找。它会让元素脱离文档流，且不会保留原来的位置，也就意味着下面的元素会移上来。
例子：
css部分
.a {
width: 200px;
height: 200px;
background-color: green;
}
.b {
width: 50px;
height: 50px;
background-color: yellow;
}
.parent {
margin-top: 50px;
border:1px solid red;
}
html部分
<div class="parent">
<div class="a">
元素A
</div>
<div class="b">
元素B
</div>
</div>
初始效果如下，可以看到元素A离顶部是有一段距离的，是因为我们给他的父元素设置了距离顶部50px
现在我们给元素A设置position:absolute, 并移动位置
.a {
position: absolute;
top: 0;
left: 100px;
width: 200px;
height: 200px;
background-color: green;
}
效果图如下可以看到，元素B位置上移了。元素A脱离了文档流，因为它的父元素没有设置定位，所以就一直往上找，找不到就相对于body定位了
