css 中Position屬性及值的作用和用法

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屬性設定後其它父塊和兄弟盒子認爲它已經不在了

    

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章