position:absolute relative

设置position属性值为 absolute 会将对象拖离出正常的文档流绝对定位,而不考虑它周围内容的布局。假如其他具有不同 z-index 属性的对象已经占据了给定的位置，他们之间不会相互影响，而会在同一位置层叠。
TRBL属性（TOP、RIGHT、BOTTOM、LEFT）
当设定position:absolute 如果父级（无限）没有设定position属性，那么当前的absolute则结合TRBL属性以浏览器左上角为原始点进行定位如果父级（无限）设定position属性，那么当前的absolute则结合TRBL属性以父级（最近）的左上角为原始点进行定位。
当设定position: relative 则参照父级（最近）的内容区的左上角为原始点结合TRBL属性进行定位（或者说相对于被定位元素在父级内容区中的上一个元素进行偏移），无父级则以BODY的左上角为原始点。相对定位是不能层叠的。在使用相对定位时，无论元素是否进行移动，元素依然占据原来的空间。因此，移动元素会导致它覆盖其他框。

举例：

<div class="parent">
    <div class="list">
        <span class="text">最不喜欢吃的蔬菜</span>           
    </div>
    <div class="list">
        <span class="icon">X</span>
        <span class="text">白菜</span>
    </div>
    <div class="list">
         <span class="text">土豆</span>
    </div>
    <div class="list">
         <span class="text">西红柿</span>
    </div>
<div>

如果需要实现这样一个菜单，菜单前面有x作为标记，白菜和土豆要对齐，那么就需要icon不能进行按照流式布局，这样我们就需要使用绝对定位position:absolute,但是一旦这样定位后，icon就乱跑，以body为参照绝对定位了，不在白菜这一行，那么我们就可以将list的position:relative，父元素设置position后，就可以让icon以父元素作为参照，icon就在白菜这一行了。最后只要修改列表文字的padding-left参数让文字前面留出空白.
以下是完整css

<style>
.parent{
    background-color:#ccc; 
    width:200px;
}
.list .text{
padding-left:20px;
}
.list{
position:relative;
}
.icon{
position:absolute;
}
</style>

效果图：

屏幕快照 2016-08-31 下午4.19.29.png

position:absolute relative

推荐阅读更多精彩内容