也許你看到這個標題覺得很簡單，確實這是一篇關于CSS中Position屬性基礎知識的文章，但是關于Position的一些細節也許你不了解。

在實際開發頁面布局時，運用position，對定位的塊級元素的嵌套的效果總是不太理解，這里做了幾個測試

一般的在w3c中我們可以很容易的獲取定義:

static ： 默認值。沒有定位，元素出現在正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。

fixed ：生成絕對定位的元素，相對于瀏覽器窗口進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

inherit　：規定應該從父元素繼承 position 屬性的值。

absolute : 生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。元素的位置通過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

relative : 生成相對定位的元素，相對于其正常位置進行定位。因此，"left:20" 會向元素的 LEFT 位置添加 20 像素。

總的來說 ：

      static呢，就是正常的文檔流順序，默認的，相當于沒有定位!

      fixed呢， 就是相對于瀏覽器窗口，就是你滾動條怎么滾動，他還是那個位置，就想是 “粘” 在窗口上了!

　　inherit呢， 就是從父元素繼承 position 屬性的值，

      absolute呢，是脫離文檔流的原來的位置是不繼續占據了，如果他的父級元素中有已經定位了的不管是absolute的還是relative，它都會相對于他的父級元素來定位，如果他的父級元素中沒有定位了的那么它就是相對于body來定位的。也就是說absolute的絕對是有參照物的！

      relative呢，是不會脫離文檔流的原來的位置也就繼續占據了，它是只相對于自身原來的位置來定位的!

　　前三個是很容易理解的，對于absolute和relative的結合使用，做了幾個測試

測試（absolute和relative）

　　1.單獨的absolute和relative 

　　2.relative中的relative，absolute中的relative

　　3.absolute中的absolute，relative中的absolute

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