CSS控制DIV絕對定位 相對定位的技巧

2021-09-30 11:22:55 字數 441 閱讀 1348

我們在網頁設計中常常會用到position屬性,裡面有5個值,分別是:absolute、fixed、relative、static、inherit。

常用到的其實就是absolute和fixed。

absolute:生成絕對定位的元素,相對於 static 定位以外的第乙個父元素進行定位。

fixed:生成絕對定位的元素,相對於瀏覽器視窗進行定位。

這兩個值的區別在於,乙個是相對於static的父元素定位,乙個是相對於瀏覽器視窗定位。

不少朋友在使用absolute的時候發現它「似乎」也是針對瀏覽器視窗定位的,其實是因為沒有設定父元素的static值。

**應該這樣寫:

這樣,id為son的div才會相對於id為parent的div進行「絕對定位」。

而fixed就完全不受任何約束了,不過在ie6瀏覽器下是無效的,ie8以後都是可以正常使用的了。

CSS定位,相對定位,絕對定位

position relative 表示相對定位。對乙個元素進行相對定位,即指通過設定垂直或水平位置,讓這個元素 相對於 它的原點起點進行移動。如果將top設定20px,那麼框將在原位置頂部下面20畫素的地方 如果將left設定為30畫素,那麼會在元素左邊建立30畫素的空間,也就是將元素向右移動,如...

定位 絕對定位 相對定位

定位是一種高階的布局手段 通過定位可以將元素擺放到頁面的任意位置 使用position屬性來設定定位當元素開啟了定位以後,可以通過偏移量來設定元素的位置 例如 top 100px bottom xxpx left right 注意 relative相對定位的參照元素是其本身在文件流中的位置進行定位 ...

position 的相關屬性(絕對定位 相對定位)

是更具最近的定位父級進行定位的,如果沒有確定定位父級,就以瀏覽器視窗進行定位。比如 position absolute left 20px top 80px 這個容器始終位於距離瀏覽器左20px,距離瀏覽器上80px的這個位置。未設定 left top right bottom 的時候,元素還在自己...