12-7層模型--相對定位 · 初識HTML+CSS

如果想為元素設置層模型中的相對定位，需要設置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> ~~~ 效果圖： ![](http://img.mukewang.com/53a00d2b00015c4b06190509.jpg) 什么叫做“偏移前的位置保留不動”呢？大家可以做一個實驗，在右側代碼編輯器的19行div標簽的后面加入一個span標簽，在標并在span標簽中寫入一些文字。如下代碼： ~~~ <body> <div id="div1"></div><span>偏移前的位置還保留不動，覆蓋不了前面的div沒有偏移前的位置</span> </body> ~~~ 效果圖： [![](http://img.mukewang.com/541a4bfc0001abef05940489.jpg)](http://img.mukewang.com/541a4bfc0001abef05940489.jpg) 從效果圖中可以明顯的看出，雖然div元素相對于以前的位置產生了偏移，但是div元素以前的位置還是保留著，所以后面的span元素是顯示在了div元素以前位置的后面。 ### 任務我來試一試：為div設置相對定位，（相對于以前位置**左上角**）向右移動100象素，向下移動50象素。 ``` <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>relative樣式</title> <style type="text/css"> #div1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px; } </style> </head> <body> <div id="div1"></div><span>偏移前的位置還保留不動，覆蓋不了前面的div沒有偏移前的位置</span> </body> </html> ```