通過案例理解position:relative和position:absolute
w3school過了HTML的知識之後，覺得要自己單純地去啃知識點有點枯燥，然後自己也很容易忘記，所以便找具體的網站練手便補上不懂的知識點。position:relative和postion:absolute困擾了我快一個星期之久，網上找到的資料魚龍混雜，剛確定“這樣”的理解之後，看另一份資料，發現“這樣”理解是錯了，就這樣不斷更正，並記錄下來，最終整理出這份，以備參閱。
若有錯誤，請指正。
下面的結果都是基於firefox38版本來測試的。
position:relative相對定位
1. 如何定位？
每個元素在頁面的普通流中會“占有”一個位置，這個位置可以理解為默認值，而相對定位就是將元素偏離元素的默認位置，但普通流中依然保持著原有的默認位置。（在父級節點的content-box區定位，父級節點有文字的話，元素的默認位置則是緊隨文字）
3. 並沒有脫離普通流，只是視覺上發生的偏移。
代碼——
<body style=‘margin:0;padding:0;background:#BDD7EE;color:white;‘> <div class=‘contain‘ style=‘margin:10px;border:10px solid white;width:300px;background:#F8CBAD;padding:10px 0 0 10px;font-size:20px;font-weight:bold;‘> <div class=‘one‘ style=‘width:50px;height:50px;background-color:#FFE699;top:-10px;left:0px;‘></div> <div class=‘two‘ style=‘height:50px;color:#fff;background-color:#C5E0B4;‘>position:relative定位測試</div> </div> </body>
顯示——
給子元素one的style加上position:relative;後顯示——
給父級元素contain的style加上文字後顯示——
將one由div節點改為span節點，並加入文字“你好”之後顯示——
<body style=‘margin:0;padding:0;background:#BDD7EE;color:white;‘> <div class=‘contain‘ style=‘margin:10px;border:10px solid white;width:300px;background:#F8CBAD;padding:10px 0 0 10px;font-size:20px;font-weight:bold;‘>如果父級節點有文字的話... <span class=‘one‘ style=‘width:50px;height:50px;background-color:#FFE699;position:relative;top:-10px;left:0px;‘>你好</span> <div class=‘two‘ style=‘height:50px;color:#fff;background-color:#C5E0B4;‘>position:relative定位測試</div> </div> </body>
position:absolute絕對定位
1. 如何定位浮動？
-
設置了TRBL
相對最近的設定了position:relative/absolute的父（祖先）節點的padding-box的區進行定位（忽略文字），找不到符合條件的父（祖先）節點，則相對瀏覽器窗口進行定位。 -
沒有設置了TRBL
則默認浮動，默認浮動在父級節點的content-box區。
2. 不管是塊級元素還是行內元素，應用了position:absolute之後，display為block：
-
可以設置width和height
-
沒有設置的話，width默認為auto
3. 脫離文檔流，容器（父）元素將得不到脫離普通流的子元素高度
代碼——
<body style=‘margin:10px;width:300px;color:white;background-color:#BDD7EE;‘> <div style=‘background-color:#F8CBAD;padding-top:10px;‘>祖先元素 <div style=‘background-color:#FFE699;border:10px solid white;padding-top:10px;‘>父級元素 <div style=‘background-color:#C5E0B4;‘>子元素</div> </div> </div> </body>
顯示----
給子元素的style加上position:absolute;top:0px;left:0px;後顯示——
給子元素的style加上position:absolute;top:0px;後顯示——
註釋：應用了position:absolute之後之設置了top，所以子元素的top緊貼瀏覽器窗口的top（距離為0px），因為沒有設置left，所以子元素左邊就默認父級元素content-box區的左側進行定位（沒應用position:absolute之前左側該在哪個位置就在那個位置）
給子元素的style加上position:absolute;後顯示——
案例：理解應用了position:absolute的元素沒有設置TRBL的話，則默認浮動在父級節點的content-box區
用一句通俗易懂的話來說就是，它該在哪個位置就在哪個位置，只不過不占位而已。
先理解下上面示例代碼的顯示圖，以及給自己元素加上position:absolute後的顯示圖。
給子元素的樣式加上：display:inline;我們看看如果子元素是內聯元素的話會如何顯示。
假如有兩個同級塊級元素，看看第一個子元素和第二個子元素分別應用position:absolute後的效果如何。
<div style=‘background-color:#F8CBAD;padding-top:10px;‘>祖先元素 <div style=‘background-color:#FFE699;border:10px solid white;padding-top:10px;‘>父級元素 <div style=‘background-color:#62C292;‘>子元素(上)</div> <div style=‘background-color:#C5E0B4;‘>子元素(下)</div> </div> </div>
如果這兩個同級塊級元素都應用了position:absolute;這兩個元素會進行重疊，子元素(下)顯示在前面，那是因為默認代碼靠後的元素的z-index比較大。
上面的案例中，將第二個子級元素換為內聯元素，子元素(下)的起點位置並沒有改變。
試試給代碼中的第一個元素的style加上display:inline;看看上面的子元素是內聯元素的話會如何顯示。
<div style=‘background-color:#F8CBAD;padding-top:10px;‘>祖先元素 <div style=‘background-color:#FFE699;border:10px solid white;padding-top:10px;‘>父級元素 <div style=‘background-color:#62C292;display:inline;‘>子元素(上)</div> <div style=‘background-color:#C5E0B4;‘>子元素(下)</div> </div> </div>
現在調換下應用position:absolute的位置
代碼：
<div style=‘background-color:#F8CBAD;padding-top:10px;‘>祖先元素 <div style=‘background-color:#FFE699;border:10px solid white;padding-top:10px;‘>父級元素 <div style=‘background-color:#C5E0B4;‘>子元素(上)</div> <div style=‘background-color:#62C292;‘>子元素(下)</div> </div> </div>
第一個子元素是內聯元素的話——
<div style=‘background-color:#F8CBAD;padding-top:10px;‘>祖先元素 <div style=‘background-color:#FFE699;border:10px solid white;padding-top:10px;‘>父級元素 <div style=‘background-color:#C5E0B4;display:inline;‘>子元素(上)</div> <div style=‘background-color:#62C292;‘>子元素(下)</div> </div> </div>
綜上：不管是塊級元素還是內聯元素應用position:absolute並且不設置TRBL，它都會默認在父級元素的content-box區浮動。原來的起點位置也是應用絕對定位後的起點位置，只不過如果應用了position:absolute的內聯元素左邊也有內聯元素的話，它的起點位置會變得更靠前，直到緊挨左邊內聯元素的邊界。
綜合案例：看看position:relative和position:absolute的綜合效果
沿用position:absolute的案例代碼——
<body style=‘margin:10px;width:300px;color:white;background-color:#BDD7EE;‘> <div style=‘background-color:#F8CBAD;padding-top:10px;‘>祖先元素 <div style=‘background-color:#FFE699;border:10px solid white;padding-top:10px;‘>父級元素 <div style=‘background-color:#C5E0B4;‘>子元素</div> </div> </div> </body>
在上面代碼的基礎上分別應用以下的定位後看看效果，並理解。
案例診斷：
-
給祖先div加上"position:relative;"以及給子元素加上
"position:absolute;top:0px;left:0px;"
給父級div加上"position:relative;"以及給子元素加上
"position:absolute;top:0px;left:0px;"
給祖先和父級div加上"position:relative;"以及給子元素加上
"position:absolute;top:0px;left:0px;"
給祖先div加上"position:absolute;"以及給子元素加上
"position:absolute;top:0px;left:0px;"
給父級div加上"position:absolute;"以及給子元素加上
"position:absolute;top:0px;left:0px;"
給祖先和父級div加上"position:absolute;"以及給子元素加上
"position:absolute;top:0px;left:0px;"
我們看到，確實是消除了環繞浮動元素環繞的影響，position:absolute的優先級高，所以float元素被遮住了，並不是消失了。另外看到contain元素的高度不受子元素的影響了，因為它們都脫離文檔流了。
參考顏色
應用：消除環繞浮動元素的影響
父級，position:relative（不設TRBL）
子級，第一個div的float:left；第二個div的position:absolute（不設TRBL）
因為第二個子級div元素默認會在父級元素的content-box區浮動，它可以消除上一個同級子級div元素的環繞浮動影響。
案例代碼——
<div class=‘contain‘ style=‘margin:10px;width:300px;background:#F8CBAD;padding:10px 0 10px;color:white;‘> <div class=‘one‘ style=‘width:30px;height:30px;background-color:#FFE699;float:left;‘></div> <div class=‘two‘ style=‘color:#fff;background-color:#C5E0B4;‘>position:absolute消除浮動環繞的影響測試</div> </div>
顯示--
給父級元素加上position:relative，給第二個子級元素加上position:absolute後，顯示——
轉載自：https://segmentfault.com/a/1190000006924181
通過案例理解position:relative和position:absolute