css定位,相對定位,絕對定位,子絕父相

2021-10-10 09:30:30 字數 624 閱讀 4664

定位 = 定位模式 + 邊偏移 定位模式:用於指定元素的定位方式,通過 position 屬性設定 邊偏移:根據定位模式確定最終位置,通過 top 、 bottom 、 left 、 right 四個屬 性設定

邊偏移:top 頂端偏移量,定義元素相對於其參照元素上邊線的 距離。

bottom 底部偏移量,定義元素相對於其參照元素下邊線的 距離。

left 左側偏移量,定義元素相對於其參照元素左邊線的 距離。

right右側偏移量,定義元素相對於其參照元素右邊線的 距離。

相對定位:position: relative; 相對定位是相對元素自己原來的位置來定位,相對定位不會脫標,原有在標準流的位置繼續保留,後面的盒子仍然以標準流的方式對 待它。 而且位置不會發生變化。

絕對定位:position: absolute; 絕對定位是相對最近一級有定位屬性的父級元素定位,如果所有父級都沒有定位屬性則相對於瀏覽器定位,而且絕對定位會脫標,不在占有原來的位置。

子絕父相:父級使用相對定位: 不脫標,在標準流中佔據空間 絕對定位的兒子們都參考父親進行定位 。

子級使用絕對定位: 脫標,不影響其他元素的擺放 自己則相對父級任意擺放位置。

子絕父相不是永遠不變的,如果父元素不需要占有位置,子絕父絕也會遇到。

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

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

定位 絕對定位 相對定位

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

CSS之定位,相對定位,絕對定位,固定定位

1 position 屬性可以控制web瀏覽器如何以及在何處顯示特定的元素。2 可以使用position屬性把乙個元素放置到網頁中的任何位置。可選值 static 預設值,元素沒有開啟定位 relative 開啟相對定位 absolute 開啟絕對定位 fixed 開啟固定定位 3 相對定位 每個元...