設(shè)置position屬性值為 absolute 會(huì)將對(duì)象拖離出正常的文檔流絕對(duì)定位,而不考慮它周圍內(nèi)容的布局。假如其他具有不同 z-index 屬性的對(duì)象已經(jīng)占據(jù)了給定的位置，他們之間不會(huì)相互影響，而會(huì)在同一位置層疊。
TRBL屬性（TOP、RIGHT、BOTTOM、LEFT）
當(dāng)設(shè)定position:absolute 如果父級(jí)（無限）沒有設(shè)定position屬性，那么當(dāng)前的absolute則結(jié)合TRBL屬性以瀏覽器左上角為原始點(diǎn)進(jìn)行定位 如果父級(jí)（無限）設(shè)定position屬性，那么當(dāng)前的absolute則結(jié)合TRBL屬性以父級(jí)（最近）的左上角為原始點(diǎn)進(jìn)行定位。
當(dāng)設(shè)定position: relative 則參照父級(jí)（最近）的內(nèi)容區(qū)的左上角為原始點(diǎn)結(jié)合TRBL屬性進(jìn)行定位（或者說相對(duì)于被定位元素在父級(jí)內(nèi)容區(qū)中的上一個(gè)元素進(jìn)行偏移），無父級(jí)則以BODY的左上角為原始點(diǎn)。相對(duì)定位是不能層疊的。在使用相對(duì)定位時(shí)，無論元素是否進(jìn)行移動(dòng)，元素依然占據(jù)原來的空間。因此，移動(dòng)元素會(huì)導(dǎo)致它覆蓋其他框。
舉例：
<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>
如果需要實(shí)現(xiàn)這樣一個(gè)菜單，菜單前面有x作為標(biāo)記，白菜和土豆要對(duì)齊，那么就需要icon不能進(jìn)行按照流式布局，這樣我們就需要使用絕對(duì)定位position:absolute,但是一旦這樣定位后，icon就亂跑，以body為參照絕對(duì)定位了，不在白菜這一行，那么我們就可以將list的position:relative，父元素設(shè)置position后，就可以讓icon以父元素作為參照，icon就在白菜這一行了。最后只要修改列表文字的padding-left參數(shù)讓文字前面留出空白.
以下是完整css
<style>
.parent{
background-color:#ccc;
width:200px;
}
.list .text{
padding-left:20px;
}
.list{
position:relative;
}
.icon{
position:absolute;
}
</style>
效果圖：
