如果想為元素設(shè)置層模型中的相對(duì)定位，需要設(shè)置position:relative（表示相對(duì)定位），它通過(guò)left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置。相對(duì)定位完成的過(guò)程是首先按static(float)方式生成一個(gè)元素(并且元素像層一樣浮動(dòng)了起來(lái))，然后相對(duì)于以前的位置移動(dòng)，移動(dòng)的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動(dòng)。
如下代碼實(shí)現(xiàn)相對(duì)于以前位置向下移動(dòng)50px，向右移動(dòng)100px;
#div1{
width:200px;
height:200px;
border:2px red solid;
position:relative;
left:100px;
top:50px;
}
<div id="div1"></div>
效果圖：
什么叫做“偏移前的位置保留不動(dòng)”呢？
大家可以做一個(gè)實(shí)驗(yàn)，在右側(cè)代碼編輯器的19行div標(biāo)簽的后面加入一個(gè)span標(biāo)簽，在標(biāo)并在span標(biāo)簽中寫(xiě)入一些文字。如下代碼：
<body>
<div id="div1"></div><span>偏移前的位置還保留不動(dòng)，覆蓋不了前面的div沒(méi)有偏移前的位置</span>
</body>
效果圖：
從效果圖中可以明顯的看出，雖然div元素相對(duì)于以前的位置產(chǎn)生了偏移，但是div元素以前的位置還是保留著，所以后面的span元素是顯示在了div元素以前位置的后面。
我來(lái)試一試：為div設(shè)置相對(duì)定位，（相對(duì)于以前位置左上角）向右移動(dòng)100象素，向下移動(dòng)50象素。
是否輸入下面的代碼：
position:relative; left:100px; top:50px;
請(qǐng)驗(yàn)證，完成請(qǐng)求
由于請(qǐng)求次數(shù)過(guò)多，請(qǐng)先驗(yàn)證，完成再次請(qǐng)求
打開(kāi)微信掃碼自動(dòng)綁定
綁定后可得到
使用 Ctrl+D 可將課程添加到書(shū)簽
舉報(bào)