一開始接觸html和css時，不可避免地會遇到定位的問題，這時會很難分清楚絕對定位和相對定位區別，導致很多時候自己在用的時也是兩者都試試看，哪個好用哪個，這是不可取的。下面講述一下兩者的區別，並以自己過來人的身份提供一種簡單易記的方法。
首先先在這裡引入w3c官方對這兩者的定義：
css 相對定位
相對定位是乙個非常容易掌握的概念。如果對乙個元素進行相對定位，它將出現在它所在的位置上。然後，可以通過設定垂直或水平位置，讓這個元素「相對於」它的起點進行移動。
css相對定位
css 絕對定位
絕對定位使元素的位置與文件流無關，因此不佔據空間。這一點與相對定位不同，相對定位實際上被看作普通流定位模型的一部分，因為元素的位置相對於它在普通流中的位置。
css絕對定位
看了這麼一堆官方的定義，並不是很直觀，這裡引用下官網的圖稍微直觀點：
css 相對定位
如果將 top 設定為 20px，那麼框將在原位置頂部下面 20 畫素的地方。如果 left 設定為 30 畫素，那麼會在元素左邊建立 30 畫素的空間，也就是將元素向右移動。如下圖：
css 絕對定位
絕對定位的元素的位置相對於最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那麼它的位置相對於最初的包含塊。
看兩個**字介紹，可能有點長，相對定位是「相對於」元素在文件中的初始位置，而絕對定位是「相對於」最近的已定位祖先元素，如果不存在已定位的祖先元素，那麼「相對於」最初的包含塊。下面具體應用下：
相對定位
相對定位還是簡單理解的，然後是絕對定位
通過絕對定位，將此標題放在距離頁面左側 100px，距離頁面頂部 150px的位置處
這裡，元素沒有已定位的祖先元素，所以它的位置相對於最初的包含塊。
emmm，怎麼理解最初的包含塊位置吶，試著加定位時不加數值，我們來看看效果：
不難看出：
這樣就好記多了，那如果有已定位的祖先元素會怎麼樣吶？其實也一樣，只是一開始的初始位置發生了改變，我們可以用上面講的，加定位不加數值來看到其初始位置，然後加入向左向右等來調整位置。
總結下還是前面那句話，相對定位相對的是自己初始位置，而絕對定位相對於已經定位的祖先元素，沒有的話相對於最初的包含塊。
html 的相對定位與絕對定位
css盒子的相對定位是相對原來的位置進行移動的。該圖的意思是 框2相對定位，等於對框進行了偏移。該框對於原來的框的位置向下移動了20px，向左偏移了30px 如下 box relative絕對定位 絕對定位的元素的位置相對於 最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那麼它的位置相對於 最...
HTML 相對定位和絕對定位
相信大家一直對前端中的相對定位和絕對定位有些模糊的概論，現在鼠光給大家講解一下 絕對定位 position obsolute 4個座標軸 top 頂 right 右 bottom 低 left 左 注釋 移動的元素，絕對定位，脫離文植流 不占用網頁空間 簡單的講 就是只要絕對定位後，你滑動網頁，定位...
絕對定位與相對定位
先看以下 效果 當設定child的div改為絕對定位後 效果 當父div沒設定絕對定位時，子絕對定位是相對於瀏覽器左上角座標，當時當父div設定了絕對或者相對定位後，效果如下 absolute 絕對定位 和 relative 相對定位 position absolute 意思是 絕對定位，他預設參照...