postion 屬性定義了一個元素在頁面布局中的位置以及對周圍元素的影響。該屬性共有5個值：

position: absolute
position: relative
position: fixed
position: static
position: inherit
本文主要詳細討論 position 屬性的前三個值，首先大概講解下后兩個值：

static

static 為 position 屬性的默認值，static 元素會遵循正常的文檔流，且會忽略 top,bottom,left,right 等屬性。

inherit

inherit 值如同其他 css 屬性的 inherit 值，即繼承父元素的 position 值。

absolute

absolute 元素將會脫離正常的文檔流，所以 其周圍的元素將會忽略它的存在。如同 absolute 元素的 display 屬性被設為了 none 一樣。此時，我們可以使用 top,bottom,left,right 等屬性對 absolute 元素進行絕對定位。一般情況下定義兩個屬性，top 或 bottom,left 或 right。
這個絕對定位需要稍微理解下，因為這里容易與 relative 產生混淆。
例如，當對 absolute 元素添加 left:10px 定位后，這個 left 究竟是對哪個元素而言呢？其實，此時將會往上查找 absolute 元素的第一個父元素，如果該父元素的 position 值存在（且不為 static）,那么這個 left:10px 就是根據該父元素進行的定位，否則將會繼續查找該父元素的父元素，一直追溯到某個父元素具備不為 static 的 position 值為止，如果不存在滿足條件的父元素，則會根據最外層的 window 進行定位。

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