position:absolute和position:relative是兩個html中常用到的樣式，前者是絕對定位，定位基於最近的一個已經定位的祖先元素，如果沒有找到，就基於根元素<html>進行定位，后者是相對定位，基於自身的位置進行偏移。
下面用幾個簡單的例子看看。
定義4個div。
<style> div { height:100px; border:1px solid #999; } #div1{ background-color:yellow; } #div2{ background-color:orange; } #div3 { background-color:skyblue; } #div4 { background-color:lightgray; } </style> <body> <div id="div1">第一個div</div> <div id="div2">第二個div</div> <div id="div3">第三個div</div> <div id="div4">第四個div</div> </body>
把第3個div設置成absolute,但是不設置left和top值。可以發現:
1.div3寬度由元素中的內容決定了
2.div4上移到第三個div的位置，被第3個div所覆蓋了
3.div3在設置絕對定位以后，並沒有基於<html>根元素偏移。
總結下我的個人理解:
1.設置了absolute的元素寬度是由內容決定的，relative元素的寬度的則是取決於父元素的寬度
2.如果設置了absolute屬性，元素會讓出原來的位置，處於另外一個層級。
3.在沒有設置left,top等值的時候，雖然div已經有了absolute元素的特性，但是還會保持在之前的位置，盡管已經處在不同的層級，這時候如果我們設置left和top都為0，就會基於最近的定位了的父元素進行偏移，在這個例子中，div3就會偏移到左上角的位置。
#div3 {
background-color:skyblue;
position:absolute;
}
接下來在div3中加入一個div5
1 <style> 2 div { 3 height:100px; 4 width:200px; 5 border:1px solid #999; 6 } 7 #div1{ 8 background-color:yellow; 9 } 10 #div2{ 11 background-color:orange; 12 } 13 #div3 { 14 background-color:skyblue; 15 position:absolute; 16 } 17 #div4 { 18 background-color:lightgray; 19 } 20 #div5 { 21 width:100px; 22 height:50px; 23 background-color:red; 24 25 } 26 27 </style> 28 <body> 29 <div id="div1">第一個div</div> 30 <div id="div2">第二個div</div> 31 <div id="div3"> 32 第三個div 33 <div id="div5"> 34 第五個div 35 </div> 36 </div> 37 <div id="div4">第四個div</div> 38 </body>
div4藏到了div3下面。
給div5設置absolute屬性，添加left:50px,top:0px;
如果設置relative,top:0px,left:50px;
#div5 {
width:100px;
height:50px;
background-color:red;
position:relative;
left:50px;
top:0px;
}
以上就是我對relative和absolute的一些簡單總結了。