如果想為元素設定層模型中的相對定位，需要設定position:relative（表示相對定位），它通過left、right、top、bottom屬性確定元素在正常文件流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成乙個元素(並且元素像層一樣浮動了起來)，然後相對於以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。
如下**實現相對於以前位置向下移動50px，向右移動100px;
#div1效果圖：
什麼叫做「偏移前的位置保留不動」呢？
大家可以做乙個實驗，在右側**編輯器的19行div標籤的後面加入乙個span標籤，在標並在span標籤中寫入一些文字。如下**：
偏移前的位置還保留不動，覆蓋不了前面的div沒有偏移前的位置效果圖：
從效果圖中可以明顯的看出，雖然div元素相對於以前的位置產生了偏移，但是div元素以前的位置還是保留著，所以後面的span元素是顯示在了div元素以前位置的後面。
HTML絕對定位與相對定位
一開始接觸html和css時，不可避免地會遇到定位的問題，這時會很難分清楚絕對定位和相對定位區別，導致很多時候自己在用的時也是兩者都試試看，哪個好用哪個，這是不可取的。下面講述一下兩者的區別，並以自己過來人的身份提供一種簡單易記的方法。首先先在這裡引入w3c官方對這兩者的定義 css 相對定位 相對...
HTML 相對定位和絕對定位
相信大家一直對前端中的相對定位和絕對定位有些模糊的概論，現在鼠光給大家講解一下 絕對定位 position obsolute 4個座標軸 top 頂 right 右 bottom 低 left 左 注釋 移動的元素，絕對定位，脫離文植流 不占用網頁空間 簡單的講 就是只要絕對定位後，你滑動網頁，定位...
html 的相對定位與絕對定位
css盒子的相對定位是相對原來的位置進行移動的。該圖的意思是 框2相對定位，等於對框進行了偏移。該框對於原來的框的位置向下移動了20px，向左偏移了30px 如下 box relative絕對定位 絕對定位的元素的位置相對於 最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那麼它的位置相對於 最...