CSS 相對定位

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

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

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

【例題】使用相對定位

代碼如下：

<!DOCTYPE html>

<html>

<head>

<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>

</body>

</html>

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

相關(guān)視頻回答

回復(0)