position : static | absolute | fixed | relative
取值：
static : 默認(rèn)值。無(wú)特殊定位，對(duì)象遵循HTML定位規(guī)則；
absolute : 將對(duì)象從文檔流中拖出，使用 left ， right ， top ， bottom 等屬性相對(duì)于其最接近的一個(gè)最有定位設(shè)置的父對(duì)象進(jìn)行絕對(duì)定位。如果不存在這樣的父對(duì)象，則依據(jù) body 對(duì)象。而其層疊通過(guò) z-index 屬性定義；
fixed : 未支持。對(duì)象定位遵從絕對(duì)(absolute)方式。但是要遵守一些規(guī)范；
relative : 對(duì)象不可層疊，但將依據(jù) left ， right ， top ， bottom 等屬性在正常文檔流中偏移位置；
Left : 檢索或設(shè)置對(duì)象與其最近一個(gè)具有定位設(shè)置的父對(duì)象左邊相關(guān)的位置。此屬性僅僅在對(duì)象的定位( position )屬性被設(shè)置時(shí)可用。否則，此屬性設(shè)置會(huì)被忽略。
Right : 檢索或設(shè)置對(duì)象與其最近一個(gè)具有定位設(shè)置的父對(duì)象右邊相關(guān)的位置。此屬性僅僅在對(duì)象的定位( position )屬性被設(shè)置時(shí)可用。否則，此屬性設(shè)置會(huì)被忽略。
Top : 檢索或設(shè)置對(duì)象與其最近一個(gè)具有定位設(shè)置的父對(duì)象頂邊相關(guān)的位置。此屬性僅僅在對(duì)象的定位( position )屬性被設(shè)置時(shí)可用。否則，此屬性設(shè)置會(huì)被忽略。
Bottom : 檢索或設(shè)置對(duì)象與其最近一個(gè)具有定位設(shè)置的父對(duì)象底邊相關(guān)的位置。此屬性僅僅在對(duì)象的定位( position )屬性被設(shè)置時(shí)可用。否則，此屬性設(shè)置會(huì)被忽略。
Absolute:
在Absolute的官方解釋語(yǔ)中出現(xiàn)了2個(gè)專業(yè)用語(yǔ)，一個(gè)是文本流，一個(gè)是父對(duì)象，很明顯，要想理解absolutely的定義就必須得了解文本流和父對(duì)象的含義。
文本流 :一系列字符，可以由多行構(gòu)成，每行由一個(gè)換行符終止。在HTML中字符也就是html文檔顯示的元素（文字，圖片，視頻等），可將文本流抽象理解為整個(gè)html頁(yè)面元素的排版方式。
父對(duì)象（也稱父級(jí)對(duì)象） : 在Css官方語(yǔ)言中并未明確給出父對(duì)象到底是個(gè)什么概念，說(shuō)得比較籠統(tǒng)，形象的也就是當(dāng)B嵌套在A中時(shí)，A就是父級(jí)對(duì)象，B就是子級(jí)對(duì)象，就好像是A把B生出來(lái)的一樣。
<div id=”A”>
現(xiàn)在我們?cè)倩剡^(guò)頭來(lái)看Absolute。在CSS中，它的寫法是： position: absolute; 他的意思是絕對(duì)定位，那到底怎么來(lái)理解“絕對(duì)”這兩個(gè)字呢？我們先來(lái)看兩個(gè)例子：
1.
創(chuàng)建一個(gè)html文檔，定義一個(gè)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>無(wú)標(biāo)題文檔</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頁(yè)面默認(rèn)的margin處開始定位的（非瀏覽器的左上角，瀏覽器的左上角再Address的A處），也就是body。那么我們?cè)趺磁浜蟃OP、RIGHT、BOTTOM、LEFT(下面簡(jiǎn)稱TRBL)來(lái)進(jìn)行定位呢？
我們繼續(xù)為叫做text1的div進(jìn)行以下定義：
#test1 {
}
（圖片2）
如果設(shè)定TRBL并且沒有父級(jí)或父級(jí)沒有設(shè)定position屬性，那么當(dāng)前的absolute則以瀏覽器左上角為原始點(diǎn)進(jìn)行定位，位置將由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>無(wú)標(biāo)題文檔</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">我是默認(rèn)定位，沒有margin/padding/border不受定位影響</div>
<div id="test1">
<div id="test2">我是子對(duì)象，大家注意看我的位置變化</div></div>
</body>
</html>
（圖片3）
在這個(gè)例子中大家可以很明顯的看出父級(jí)對(duì)象是個(gè)什么意思了吧！說(shuō)得更直觀一點(diǎn)，父子對(duì)象關(guān)系就是當(dāng)B嵌套在A中時(shí)，A就是父級(jí)對(duì)象，B就是子級(jí)對(duì)象，就好像是A把B生出來(lái)的一樣。
那我們來(lái)看看當(dāng)為名叫test2的子對(duì)象加上了TRBL是，它的移動(dòng)和沒有父對(duì)象的時(shí)候是否一樣呢？
我們?yōu)閠est2定義如下：
#test2 {
}
(圖片4)
通過(guò)這2個(gè)例子，我們完全可以很好的理解絕對(duì)定位absolute的意思，總結(jié)可以說(shuō)為：
它是參照瀏覽器的左上角，配合TOP、RIGHT、BOTTOM、LEFT(下面簡(jiǎn)稱TRBL)進(jìn)行定位，在沒有設(shè)定TRBL，默認(rèn)依據(jù)父級(jí)的做標(biāo)原始點(diǎn)為原始點(diǎn)。如果設(shè)定有TRBL并且父級(jí)沒有設(shè)定position屬性，那么當(dāng)前的absolute則以瀏覽器左上角為原始點(diǎn)進(jìn)行定位，位置將由TRBL決定。
明白了之后相信大家可以理解為什么行家們多說(shuō)“網(wǎng)頁(yè)居中的話用Absolute就容易出錯(cuò)”這句話了吧？！因?yàn)榫W(wǎng)頁(yè)一直是隨著分辨率的大小自動(dòng)適應(yīng)的，而Absolute則會(huì)以瀏覽器的左上角為原始點(diǎn)，不會(huì)因?yàn)榉直媛实淖兓兓恢谩?/p>
<!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>無(wú)標(biāo)題文檔</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>無(wú)標(biāo)題文檔</title>
<style type="text/css">
body {
#test1 {
#test2 {
</style>
</head>
<body>
<div id="test1">
</div>
</body>
</html>
Fixed:
