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

2021-09-07 08:46:31 字數 989 閱讀 8486

position:relative;   → 必須先宣告,自己要相對定位了,

left:100px; → 然後進行調整。

top:150px; → 然後進行調整。

相對定位不脫標,真實位置是在老家,只不過影子出去了,可以到處飄.

position: relative;

right: 100px; → 往左邊移動

top: 100px;

position: relative;

right: 100px;

bottom: 100px; → 移動方向是向上。

span
→ 絕對定位

→ 相對定位

→ 沒有定位

→ 絕對定位,以box2為參考定位。

絕對定位之後,所有標準流的規則,都不適用了.所以margin:0 auto;失效.

width: 600px;

height: 60px;

position: absolute;

left: 50%;

top: 0;

margin-left: -300px; → 寬度的一半

非常簡單,當做公式記一下來.就是left:50%;margin-left:負的寬度的一半.

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

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

前端html 固定位置 相對定位 絕對定位

定位元素都完全脫離文件流 1.不加定位狀態 2.相對定位 position relative top 50px left 50px 1.完全脫離文件流 2.它在文件流中的位置還會被保留 下面的內容不會上竄 3.相對於它原來的位置進行位置變化 變化距離相對於原位置 2.絕對定位 position ab...

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

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