記得一年前，到一家公司面試的時候，問我position有哪幾個屬性，我憋半天才回答出2個，大家估計都清楚，就是我們經常用到的2個（relative，absolute）。 最近又用到了好多，深入研究了下。 一、語法: position：static | relative | absolute | fi ...
記得一年前，到一家公司面試的時候，問我position有哪幾個屬性，我憋半天才回答出2個，大家估計都清楚，就是我們經常用到的2個（relative，absolute）。
最近又用到了好多，深入研究了下。
一、語法:
position：static | relative | absolute | fixed
取值:
static ：預設值，無特殊定位，對象遵循正常文檔流。top，right，bottom，left等屬性不會被應用，預設值。
relative：相對定位，對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。
absolute：絕對定位，對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊通過z-index屬性定義。
fixed：固定定位，對象脫離正常文檔流，使用top，right，bottom，left等屬性以視窗為參考點進行定位，當出現滾動條時，對象不會隨著滾動。
二、四個屬性的詳細介紹：
1、static，預設值
說 到這裡我們不得不提一下一個定義——文檔流，很多書對文檔流這個概念只是一筆帶過，沒有詳細解答，但我根據自己的經驗和理解對它進行了總結，文檔流其實就
是文檔的輸出順序，也就是我們通常看到的由左到右、由上而下的輸出形式，在網頁中每個元素都是按照這個順序進行排序和顯示的，而float和
position兩個屬性可以將元素從文檔流脫離出來顯示。
預設值就是讓元素繼續按照文檔流顯示，不作出任何改變。
2、relative，相對定位
相對定位一個最大特點是：自己通過定位跑開了還占用著原來的位置，不會讓給他周圍的諸如文本流之類的對象。相對定位也比較獨立，做什麼事它自己說了算，要定位的時候，它是以自己本身所在位置偏移的（相對對象本身偏移）。本身位置變化了，而元素最初所占的物理空間依然還是存在，另外一點元素相對定位後並沒有影響其他相鄰的元素。
3、absolute，絕對定位
位置被設置為absolute後，被設置的元素會被定義到包含它的元素內的指定坐標（X坐標、Y坐標）。
比如：position：absolute；left:20px;top:80px;
這個容器始終位於距離瀏覽器左20px,距離瀏覽器上80px的這個位置。它不會隨著視窗大小變化，只是固定在一個特定的坐標軸上面；
4、固定位置，fixed
在理論上，被設置為fixed的元素會被定位於瀏覽器視窗的一個指定坐標，不論視窗是否滾動，它都會固定在這個位置。但是目前它在IE6中不被支持.
Ie6處理方法：
body{ background-image:url(about:blank); /* for IE6 */ background-attachment:fixed; /*必須*/ } .demo{ _position:absolute; _top:expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight); }
總的例子html：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>position</title> <style type="text/css"> *{margin:0;padding:0;} .clearfix:before,.clearfix:after {content:"";display:table;} .clearfix:after {clear:both;overflow:hidden;} .clearfix {zoom:1;} .mgt20{margin-top:20px;} .w1000{width:1000px;margin:0 auto;min-height:1900px;} #demo{ position:relative; border:1px solid #000; margin-top:50px; top:-50px; line-height:18px; } .static,.fixed,.absolute,.relative{ width:200px; } .relative{ position:relative; left:150px; top:-20px; background-color:#ffe4e1; } .static{ position:static; background-color:#bbb; } .fixed{ position:fixed; top:200px; left:50%; margin-left:-500px; background-color:#ffc0cb; } .absolute{ position:absolute; right:10px; top:10px; background-color:#b0c4de; } </style> </head> <body> <div class="w1000"> <div class="mgt20 clearfix"> <div id="demo" class="clearfix"> <div class="static">static: 預設值。無特殊定位，對象遵循HTML定位規則 </div> <div class="absolute">absolute: 將對象從文檔流中拖出,使用left,right,top,bottom 等屬性相對於其最接近的一個最有定位設置的父對象進行絕對定位。如果不存在這樣的父對象,則依據body對象。而其層疊通過z-index屬性定義 </div> <div class="fixed">fixed屬性的說明：fixed總是以body為定位時的對象，總是根據瀏覽器的視窗來進行元素的定位，通過"left"、 "top"、 "right"、"bottom" 屬性進行定位。</div> <div class="relative">relative1:對象不可層疊，對象原來占有的位置保留,但將依據 left,right,top,bottom 等屬性在正常文檔流中偏移位置 </div> </div> </div> </div> </body> </html>
顯示：
三、position註意事項
1、當Position屬性值為Relative時對象原來占有的位置保留，其後面 的對象按原來文檔流仍然保持原來的位置Top的值表示對象相對原位置向下偏移的距離bottom的值表示對象相對原位置向上偏移的距離兩者同時存在時，只有Top起作用。left的值表示對象相對原位置向右偏移的距離right的值表示對象相對原位置向左偏移的距離兩者同時存在時，只有left起作用。
2、當Position屬性值為absolute時對象從文檔流中抽取出來，原占有的位置被後面的對象頂替上來Top的值表示對象上邊框與瀏覽器視窗頂部 的距離bottom的值表示對象下邊框與瀏覽器視窗底部的距離兩者同時存在時，只有Top起作用；如果兩者都未指定，則其頂端將與原文檔流位置一致，即垂 直保持位置不變。left的值表示對象左邊框與瀏覽器視窗左邊的距離right的值表示對象右邊框與瀏覽器視窗右邊的距離兩者同時存在時，只有left起
作用；如果兩者都未指定，則其左邊將與原文檔流位置一致，即水平保持位置不變。
在Position屬性值為absolute的同時，如果有一級父對象（無論是父對象還是祖父對象，或者再高的輩分，一樣）的Position屬性值為Relative時，則上述的相對瀏覽器視窗定位將會變成相對父對象定位，這對精確定位是很有幫助的。
五、positon 與 display
元素分為內聯元素和區塊元素兩類（當然也有其它的），在內聯元素中有個非常重要的常識，即內聯元素是不可以設置區塊元素所具有的樣式，例如:width | height。
relative : 原來是什麼類型的依舊是什麼類型。
absolute | fixed ： 元素就被重置為了區塊元素，
例如：打算為span元素指定大小，並絕對定位
<span style="position:absolute; width:100px; height:50px;">span</span>這是完全正確的， <span style="position:absolute; display:block; width:100px; height:100px;">span</span>，這裡的display:block就是多餘的了。
六、position 與 float
一個元素若設置了 position:absolute |
fixed; 則該元素就不能設置float。這是一個常識性的知識點，因為這是兩個不同的流，一個是浮動流，另一個是“定位流”。
但是 relative 卻可以。因為它原本所占的空間仍然占據文檔流。
