層模型--相對定位 · PHP工程師

如果想為元素設置層模型中的相對定位，需要設置position:relative（表示相對定位），它通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成一個元素(并且元素像層一樣浮動了起來)，然后相對于以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。如下代碼實現相對于以前位置向下移動50px，向右移動100px; ~~~ #div1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px; } <div id="div1"></div> ~~~ 效果圖： ![](https://box.kancloud.cn/2016-07-05_577b595786021.jpg) 什么叫做“偏移前的位置保留不動”呢？大家可以做一個實驗，在右側代碼編輯器的19行div標簽的后面加入一個span標簽，在標并在span標簽中寫入一些文字。如下代碼： ~~~ <body> <div id="div1"></div><span>偏移前的位置還保留不動，覆蓋不了前面的div沒有偏移前的位置</span> </body> ~~~ 效果圖： ![](https://box.kancloud.cn/2016-07-05_577b5957a3b2b.jpg) 從效果圖中可以明顯的看出，雖然div元素相對于以前的位置產生了偏移，但是div元素以前的位置還是保留著，所以后面的span元素是顯示在了div元素以前位置的后面。