HTML5中POSITION的理解

標籤：

CSS的Position很重要，position一共有4個屬性值，就是以下幾個值：

　　　　　　　　　　　　　　　　static，relative，absolute，fixed。

元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定，顯示層級通過z-index控制。

static：靜態定位。如果你沒有設定position屬性，那麼預設就是static。top，left，bottom，right等屬性，在static的情況下是無效的，要使用這些屬性，必須把position設定為其他三個值之一。

relative：relative 元素遵循正常的文檔流，所以周圍元素不會忽略它的存在，relative 元素同樣支援 top,bottom,left,right等屬性。當我們使用 top,bottom,left,right等屬性對 relative 元素進行相對定位時的效果有點類似於 margin 屬性達到的效果，但是區別在於， relative 元素周圍的元素將會忽略 relative 元素的移動

# div 
{
background:#ccc; width:200px; height:200px;
position:relative; left:200px; top:200px
}

absolute：absolute 元素將會脫離正常的文檔流，所以 其周圍的元素將會忽略它的存在。如同 absolute 元素的 display 屬性被設為了 none 一樣。此時，我們可以使用 top,bottom,left,right 等屬性對 absolute 元素進行絕對位置。一般情況下定義兩個屬性，top 或 bottom,left 或 right。

# div 
{
background:#ccc; width:200px; height:200px;
position:absolute; left:200px; top:200px
}

fixed：固定定位。元素將被設定在瀏覽器上一個固定位置上，不會隨其他元素滾動。形象點說，上下拉動捲軸的時候，fixed的元素在螢幕上的位置不變。需要注意的是IE6並不支援此屬性。

首先，fixed 元素定位與它的父元素無任何關係，它永遠是相對最外層的 window 進行定位的。
第二，fixed 元素正如它的名字一樣，它是固定在螢幕的某個位置，它不會因為螢幕的滾動而消失。

# div 
{
background:#ccc; width:200px; height:200px;
position:fixed; left:200px; top:200px
}

position屬性在CSS布局中是至關重要的，真正的瞭解了position屬性會對今後學習DIV加CSS有很大的協助

HTML5中POSITION的理解