CSS 相對(duì)定位

提問人：劉團(tuán)圓發(fā)布時(shí)間：2020-11-18

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

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

【例題】使用相對(duì)定位

代碼如下：

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

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

相關(guān)視頻回答

回復(fù)(0)