位置:首頁 > 軟件操作教程 > 編程開發(fā) > CSS > 問題詳情

CSS 相對定位

提問人:劉團圓發(fā)布時間:2020-11-18

    如果使用相對定位(position: relative),元素框偏移某個距離,元素仍保持其未定位前的形狀,原本所占的空間仍保留。

    與絕對定位不同的是,元素并不會脫離其原來的文檔流,從頁面中看上去,只是兀素被移動了位置而已。下面通過一個案例來幫助大家理解相對定位。

    【例題】使用相對定位

    代碼如下:

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Document</title>

<style>

div{

width: 200px;

height: 200px;

}

.d1{

background: pink;

}

.d2{

background: lightblue;

position:absolute;

left:100px;

top:100px;

}

.d3{

background: yellowgreen;

}

</style>

</head>

<body>

<div></div>

<div></div>

<div></div>

</body>

</html>

image.png

    從代碼運行結(jié)果可以看出,元素雖然已經(jīng)產(chǎn)生了偏移,但是其所占的物理空間位置依然保留,這也是為什么第三個div沒有上移的原因。

繼續(xù)查找其他問題的答案?

相關(guān)視頻回答
回復(0)
返回頂部