position有四種可選值
1.static:默認屬性值
2.relative:相對定位,
1)使用相對定位的盒子,會相對於它在原本的位置,通過偏移指定的距離,到達新的位置
2)使用相對定位的盒子荏在標準流中,它對父塊和兄弟盒子沒有任何影響
3.absolute:絕對定位,
1)使用絕對定位的盒子以它的"最近"的一個"已經定位"的"祖先元素"爲基準進行偏移。
如果沒有已經定位的祖先元素,那麼會以瀏覽器窗口爲基準進行定位。
2)絕對定位的框從標準流中脫離,它們對其後的兄弟盒子的定位沒有影響,其它盒子就好像這個盒子不存在一樣。
3)如果設置了絕對定位,而沒有設置偏移屬性,那麼它仍將保持在原來的位置。
說明:"已經定位"的含義是,position屬性被設置,並且被設置爲不是static的任意方式,那麼該元素就被定義爲"已經定位"的元素
"祖先元素"的含義是,即爲"BOM"樹中所指的父節點
"最近",找出所有"已經定位"的元素,其中離該節點最近的一個節點,父節點比祖父節點近,祖父節點比曾祖父近,以此類推
4.fixed:固定定位,
與absolute類似,區別在它的基準不是祖先元素,而是瀏覽器窗口或者其它顯示設備的窗口,IE6不支持
總結:
最容易混淆的是relative和absolute的屬性,它們之間的區別是:
1.relative是相對與自己原來所在空間進行移位顯示,而absolute則是根據另一盒子去定位
2.relative設定的偏移,其它父塊和兄弟盒子就不知道它有移位這回事,一直就認爲它在原處
而absolute屬性設定後其它父塊和兄弟盒子認爲它已經不在了