css中相對定位 絕對定位和固定定位的區別

2021-10-06 04:47:36 字數 462 閱讀 9133

position:relative

配合 top/left/bottom/right偏移屬性使用

1.元素不脫離文件流(偏移後其他兄弟元素不佔位)

2.相對元素原來的位置做偏移

3.如果乙個元素設定了relative,但是沒寫偏移屬性,跟沒定位的效果是一樣的。

使用場景:

1.類似於margin,做元素的位置的微調

2.作為絕對定位元素的父級或者祖先級已定位元素使用。

position:absolute;

配合 top/left/bottom/right偏移屬性使用

1.元素脫離文件流

2.如果有定位父級相對於第乙個定位父級發生偏移,沒有定位父級相對於相對body左上角發生偏移;

position:fixed;

配合 top/left/bottom/right偏移屬性使用

1.相對於body左上角發生偏移

css 相對定位,絕對定位,固定定位

定位有三種,分別是相對定位 絕對定位 固定定位。相對定位 position relative 絕對定位 position absolute 固定定位 position fixed 相對定位 相對定位,就是微調元素位置的。讓元素相對自己原來的位置,進行位置調整。head meta charset ut...

前端CSS 相對定位,絕對定位,固定定位

position relative 必須先宣告,自己要相對定位了,left 100px 然後進行調整。top 150px 然後進行調整。相對定位不脫標,真實位置是在老家,只不過影子出去了,可以到處飄.position relative right 100px 往左邊移動 top 100px posi...

相對定位 絕對定位 固定定位 粘滯定位(css)

定位 position position 可選值static 預設值 元素是靜止的沒有開啟定位 relative開啟元素的相對定位 absolute開啟元素的絕對定位 fixed開啟元素的固定定位 sticky開啟元素的粘滯定位 相對定位position relative 元素開啟相對定位後,如果不...