CSS元素之position 定位

值	屬性
inhert	規定應該從父元素繼承 position 屬性的值。
static	預設值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。
relative	產生相對定位的元素，相對於元素本身正常位置進行定位。因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。
absolute	產生絕對位置的元素，相對於 static 定位以外的第一個祖先元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
fixed	產生絕對位置的元素，相對於瀏覽器視窗進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

CSS有三種基本的定位機制：普通流，浮動和絕對位置

普通流是預設定位方式，在普通流中元素框的位置由元素在html中的位置決定，元素position屬性為static或繼承來的static時就會按照普通流定位，這也是我們最常見的方式。

相對定位比較簡單，對應position屬性的relative值，如果對一個元素進行相對定位，它將出現在他所在的位置上，然後可以通過設定垂直或水平位置，讓這個元素相對於它自己移動，在使用相對定位時，無論元素是否移動，元素在文檔流中佔據原來空間，只是表現會改變。

普通流：<div style="border: solid 1px #0e0; width:200px;">        <div style="height: 100px; width: 100px; background-color: Red;">        </div>        <div style="height: 100px; width: 100px; background-color: Green;">        </div>        <div style="height: 100px; width: 100px; background-color: Red;">        </div>    </div>

相對定位：<div style="border: solid 1px #0e0; width:200px;">        <div style="height: 100px; width: 100px; background-color: Red;">        </div>        <div style="height: 100px; width: 100px; background-color: Green; position:relative; top:20px; left:20px;">        </div>        <div style="height: 100px; width: 100px; background-color: Red;">        </div>    </div>

上面例子可以看出，對綠色div進行相對定位，分別右移，下移20px後第二個紅色div位置並沒有相應變化，而是在原位置，綠色div遮擋住了部分紅色div。

 

相對定位可以看作特殊的普通流定位，元素位置是相對於他在普通流中位置發生變化，而絕對位置使元素的位置與文檔流無關，也不佔據文檔流空間，普通流中的元素布局就像絕對位置元素不存在一樣。

絕對位置的元素的位置是相對於距離他最近的非static祖先元素位置決定的。如果元素沒有已定位的祖先元素，那麼他的位置就相對於初始包含塊兒（body或html神馬的）元素。

因為絕對位置與文檔流無關，所以絕對位置的元素可以覆蓋頁面上的其他元素，可以通過z-index屬性控制疊放順序，z-index越高，元素位置越靠上。

還是剛才的例子，稍微改動一下，讓綠色div絕對位置，為了清晰顯示，第二個紅色div改為黃色。

<div style="border: solid 1px #0e0; width:200px; position:relative;">        <div style="height: 100px; width: 100px; background-color: Red;">        </div>        <div style="height: 100px; width: 100px; background-color: Green; position:absolute; top:20px; left:20px;">        </div>        <div style="height: 100px; width: 100px; background-color: Yellow;">        </div>    </div>

這時可以看出，綠色div是相對於父元素，也就是綠框div進行的移位，而紅色和黃色div進行布局時就像綠色div不存在一樣。

 

最後要說的就是fixed屬性了，應用fixed也叫固定定位，固定定位是絕對位置的中，固定定位的元素也不包含在普通文檔流中，差異是苦丁元素的包含塊兒是視口（viewport），經常見一些頁面的如人人網看線上好友那個模組總在視窗右下角，估計用的是類似技術

固定定位：<div style="border: solid 1px #0e0; width:200px;">        <div style="height: 100px; width: 100px; background-color: Red;">        </div>        <div style="height: 100px; width: 100px; background-color: Green; position:fixed; bottom:20px; left:20px;">        </div>        <div style="height: 100px; width: 100px; background-color: Yellow;">        </div>    </div>

可見hongse和黃色div布局沒有受到綠色div影響，而無論是頁面縱向捲軸在頁面頂端還是底端，綠色div總是在視口左下角