CSS中的定位模式規定了一個盒子在總體的布局上應該處于什么位置以及對周圍的盒子會有什么影響。該模式包括了常規文檔流，浮動，和幾種類型的 position 定位的元素。
其中，CSS position 屬性可以取5種值：
position: absolute
position: relative
position: fixed
position: static
position: inherit
static 是 position 默認的屬性值。任何應用了 position:static 的元素都處于常規文檔流中。它處于什么位置以及它如何影響周邊的元素都是由盒模型所決定的。
一個 static 定位的元素會忽略所有 top，right，bottom，left 以及 z-index 屬性所聲明的值。為了讓你的元素能使用這五個屬性，你需要先為它的 position 屬性應用這三個值的其中之一： absolute，relative，fixed
position 值為 inherit 的元素和其他所有屬性的繼承值一樣，元素會繼承父元素的 position 值。

為了后面能更好地理解，先特將此例的DOM草圖畫出來：

上面的DOM圖，我想大家一定非常容易的理解，下面就一起來主要看position的使用。

第一步：position: static

在CSS中所有元素的“position”屬性的默認值都是“static”，因為不需要顯式的為每個元素設置“position:static”。此時大家會問，那這個屬性值是不是沒有任何意義呢？其實不是的，他在CSS中也會起著很大的作用。我們來看一個實例：

比如說你的兩個頁面，同時存在“div#div-1”，那么此時你在A面中需要對“div#div-1”進行絕對定位；而在B頁面中“div#div-1”又不需要進行絕對定位。

A頁面中“div#div-1”絕對定位：

發表評論 共有條評論 用戶名: 密碼: 驗證碼: 匿名發表