position : static | absolute | fixed | relative
取值：
static : 默認值。無特殊定位，對象遵循HTML定位規則；
absolute : 將對象從文檔流中拖出，使用 left ， right ， top ， bottom 等屬性相對于其最接近的一個最有定位設置的父對象進行絕對定位。如果不存在這樣的父對象，則依據 body 對象。而其層疊通過 z-index 屬性定義；
fixed : 未支持。對象定位遵從絕對(absolute)方式。但是要遵守一些規范；
relative : 對象不可層疊，但將依據 left ， right ， top ， bottom 等屬性在正常文檔流中偏移位置；
Left : 檢索或設置對象與其最近一個具有定位設置的父對象左邊相關的位置。此屬性僅僅在對象的定位( position )屬性被設置時可用。否則，此屬性設置會被忽略。
Right : 檢索或設置對象與其最近一個具有定位設置的父對象右邊相關的位置。此屬性僅僅在對象的定位( position )屬性被設置時可用。否則，此屬性設置會被忽略。
Top : 檢索或設置對象與其最近一個具有定位設置的父對象頂邊相關的位置。此屬性僅僅在對象的定位( position )屬性被設置時可用。否則，此屬性設置會被忽略。
Bottom : 檢索或設置對象與其最近一個具有定位設置的父對象底邊相關的位置。此屬性僅僅在對象的定位( position )屬性被設置時可用。否則，此屬性設置會被忽略。
Absolute:
在Absolute的官方解釋語中出現了2個專業用語，一個是文本流，一個是父對象，很明顯，要想理解absolutely的定義就必須得了解文本流和父對象的含義。
文本流 :一系列字符，可以由多行構成，每行由一個換行符終止。在HTML中字符也就是html文檔顯示的元素（文字，圖片，視頻等），可將文本流抽象理解為整個html頁面元素的排版方式。
父對象（也稱父級對象） : 在Css官方語言中并未明確給出父對象到底是個什么概念，說得比較籠統，形象的也就是當B嵌套在A中時，A就是父級對象，B就是子級對象，就好像是A把B生出來的一樣。
<div id=”A”>
現在我們再回過頭來看Absolute。在CSS中，它的寫法是： position: absolute; 他的意思是絕對定位，那到底怎么來理解“絕對”這兩個字呢？我們先來看兩個例子：
1.
創建一個html文檔，定義一個div，并為它寫下以下屬性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
#test1 {
position:absolute;
width:200px;
height:200px;
border:10px solid #000000;
background-color:#990000;}
</style>
</head>
<body>
<div id="test1"></div>
</body>
</html>
（圖片1）
很明顯在沒有任何其他元素干擾下他是參照html頁面默認的margin處開始定位的（非瀏覽器的左上角，瀏覽器的左上角再Address的A處），也就是body。那么我們怎么配合TOP、RIGHT、BOTTOM、LEFT(下面簡稱TRBL)來進行定位呢？
我們繼續為叫做text1的div進行以下定義：
#test1 {
}
（圖片2）
如果設定TRBL并且沒有父級或父級沒有設定position屬性，那么當前的absolute則以瀏覽器左上角為原始點進行定位，位置將由TRBL決定。
2.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
body {
margin:0;
color:#FFFFFF;}
#test0 {
width:270px;
height:50px;
background-color:#795B7D;}
#test1 {
position:absolute;
width:200px;
height:200px;
border:10px solid #000000;
background-color:#990000;
top:50px;
left:50px;}
#test2 {
position:absolute;
border:10px solid #BFA800;
width:100px;
height:100px;
background-color:#000066;}
</style>
</head>
<body>
<div id="test0">我是默認定位，沒有margin/padding/border不受定位影響</div>
<div id="test1">
<div id="test2">我是子對象，大家注意看我的位置變化</div></div>
</body>
</html>
（圖片3）
在這個例子中大家可以很明顯的看出父級對象是個什么意思了吧！說得更直觀一點，父子對象關系就是當B嵌套在A中時，A就是父級對象，B就是子級對象，就好像是A把B生出來的一樣。
那我們來看看當為名叫test2的子對象加上了TRBL是，它的移動和沒有父對象的時候是否一樣呢？
我們為test2定義如下：
#test2 {
}
(圖片4)
通過這2個例子，我們完全可以很好的理解絕對定位absolute的意思，總結可以說為：
它是參照瀏覽器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面簡稱TRBL)進行定位，在沒有設定TRBL，默認依據父級的做標原始點為原始點。如果設定有TRBL并且父級沒有設定position屬性，那么當前的absolute則以瀏覽器左上角為原始點進行定位，位置將由TRBL決定。
明白了之后相信大家可以理解為什么行家們多說“網頁居中的話用Absolute就容易出錯”這句話了吧？！因為網頁一直是隨著分辨率的大小自動適應的，而Absolute則會以瀏覽器的左上角為原始點，不會因為分辨率的變化而變化位置。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
body {
#test0 {
#test1 {
#test2 {
</style>
</head>
<body>
<div id="test1">
</div>
<div id="test0">我是參考div，沒有margin/padding/border不受定位影響</div>
</body>
</html>
（圖片5）
（圖片6）
#test1 {
}
top:150px;
}
（圖片7）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style type="text/css">
body {
#test1 {
#test2 {
</style>
</head>
<body>
<div id="test1">
</div>
</body>
</html>
Fixed:
