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)的位置,。此屬性?xún)H僅在對(duì)象的定位( position )屬性被設(shè)置時(shí)可用,。否則，此屬性設(shè)置會(huì)被忽略,。
Right : 檢索或設(shè)置對(duì)象與其最近一個(gè)具有定位設(shè)置的父對(duì)象右邊相關(guān)的位置,。此屬性?xún)H僅在對(duì)象的定位( position )屬性被設(shè)置時(shí)可用。否則,，此屬性設(shè)置會(huì)被忽略,。
Top : 檢索或設(shè)置對(duì)象與其最近一個(gè)具有定位設(shè)置的父對(duì)象頂邊相關(guān)的位置。此屬性?xún)H僅在對(duì)象的定位( position )屬性被設(shè)置時(shí)可用,。否則,，此屬性設(shè)置會(huì)被忽略。
Bottom : 檢索或設(shè)置對(duì)象與其最近一個(gè)具有定位設(shè)置的父對(duì)象底邊相關(guān)的位置,。此屬性?xún)H僅在對(duì)象的定位( position )屬性被設(shè)置時(shí)可用,。否則，此屬性設(shè)置會(huì)被忽略,。
Absolute:
在Absolute的官方解釋語(yǔ)中出現(xiàn)了2個(gè)專(zhuān)業(yè)用語(yǔ),，一個(gè)是文本流，一個(gè)是父對(duì)象,，很明顯,，要想理解absolutely的定義就必須得了解文本流和父對(duì)象的含義。
文本流 :一系列字符,，可以由多行構(gòu)成,，每行由一個(gè)換行符終止。在HTML中字符也就是html文檔顯示的元素（文字,，圖片,，視頻等）,，可將文本流抽象理解為整個(gè)html頁(yè)面元素的排版方式。
父對(duì)象（也稱(chēng)父級(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中，它的寫(xiě)法是： position: absolute; 他的意思是絕對(duì)定位,，那到底怎么來(lái)理解“絕對(duì)”這兩個(gè)字呢,？我們先來(lái)看兩個(gè)例子：
1.
創(chuàng)建一個(gè)html文檔，定義一個(gè)div,，并為它寫(xiě)下以下屬性
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./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）
很明顯在沒(méi)有任何其他元素干擾下他是參照html頁(yè)面默認(rèn)的margin處開(kāi)始定位的（非瀏覽器的左上角,，瀏覽器的左上角再Address的A處），也就是body,。那么我們?cè)趺磁浜蟃OP,、RIGHT、BOTTOM,、LEFT(下面簡(jiǎn)稱(chēng)TRBL)來(lái)進(jìn)行定位呢,？
我們繼續(xù)為叫做text1的div進(jìn)行以下定義：
#test1 {
}
（圖片2）
如果設(shè)定TRBL并且沒(méi)有父級(jí)或父級(jí)沒(méi)有設(shè)定position屬性，那么當(dāng)前的absolute則以瀏覽器左上角為原始點(diǎn)進(jìn)行定位,，位置將由TRBL決定,。
2.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./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)定位，沒(méi)有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)和沒(méi)有父對(duì)象的時(shí)候是否一樣呢？
我們?yōu)閠est2定義如下：
#test2 {
}
(圖片4)
通過(guò)這2個(gè)例子,，我們完全可以很好的理解絕對(duì)定位absolute的意思,，總結(jié)可以說(shuō)為：
它是參照瀏覽器的左上角，配合TOP,、RIGHT,、BOTTOM、LEFT(下面簡(jiǎn)稱(chēng)TRBL)進(jìn)行定位,，在沒(méi)有設(shè)定TRBL,，默認(rèn)依據(jù)父級(jí)的做標(biāo)原始點(diǎn)為原始點(diǎn)。如果設(shè)定有TRBL并且父級(jí)沒(méi)有設(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./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./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,，沒(méi)有margin/padding/border不受定位影響</div>
</body>
</html>
（圖片5）
（圖片6）
#test1 {
}
top:150px;
}
（圖片7）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www./TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www./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:
