w3school過了HTML的知識之后，覺得要自己單純地去啃知識點有點枯燥呆盖，然后自己也很容易忘記呢灶，所以便找具體的網(wǎng)站練手便補上不懂的知識點曾雕。position:relative和postion:absolute困擾了我快一個星期之久和措，網(wǎng)上找到的資料魚龍混雜庄呈，剛確定“這樣”的理解之后，看另一份資料派阱，發(fā)現(xiàn)“這樣”理解是錯了诬留，就這樣不斷更正，并記錄下來贫母，最終整理出這份文兑，以備參閱。
若有錯誤腺劣，請指正绿贞。
下面的結(jié)果都是基于firefox38版本來測試的。
position:relative相對定位
1. 如何定位橘原？
每個元素在頁面的普通流中會“占有”一個位置籍铁，這個位置可以理解為默認值，而相對定位就是將元素偏離元素的默認位置趾断，但普通流中依然保持著原有的默認位置拒名。（在父級節(jié)點的content-box區(qū)定位，父級節(jié)點有文字的話芋酌，元素的默認位置則是緊隨文字）
2. 不會改變行內(nèi)元素的display屬性增显。
3. 并沒有脫離普通流，只是視覺上發(fā)生的偏移脐帝。
代碼——
<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節(jié)點改為span節(jié)點同云，并加入文字“你好”之后顯示——
<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;'>如果父級節(jié)點有文字的話...
<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. 如何定位浮動？
- 設(shè)置了TRBL
相對最近的設(shè)定了position:relative/absolute的父（祖先）節(jié)點的padding-box的區(qū)進行定位（忽略文字）腮恩，找不到符合條件的父（祖先）節(jié)點梢杭，則相對瀏覽器窗口進行定位。 - 沒有設(shè)置了TRBL
則默認浮動秸滴，默認浮動在父級節(jié)點的content-box區(qū)武契。
2. 不管是塊級元素還是行內(nèi)元素，應(yīng)用了position:absolute之后荡含，display為block：
- 可以設(shè)置width和height
- 沒有設(shè)置的話咒唆，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;后顯示——
注釋：應(yīng)用了position:absolute之后之設(shè)置了top释液，所以子元素的top緊貼瀏覽器窗口的top（距離為0px）全释，因為沒有設(shè)置left，所以子元素左邊就默認父級元素content-box區(qū)的左側(cè)進行定位（沒應(yīng)用position:absolute之前左側(cè)該在哪個位置就在那個位置）
給子元素的style加上position:absolute;后顯示——
案例：理解應(yīng)用了position:absolute的元素沒有設(shè)置TRBL的話误债，則默認浮動在父級節(jié)點的content-box區(qū)
用一句通俗易懂的話來說就是浸船，它該在哪個位置就在哪個位置妄迁，只不過不占位而已。
先理解下上面示例代碼的顯示圖李命，以及給自己元素加上position:absolute后的顯示圖登淘。
給子元素的樣式加上：display:inline;我們看看如果子元素是內(nèi)聯(lián)元素的話會如何顯示。
假如有兩個同級塊級元素封字，看看第一個子元素和第二個子元素分別應(yīng)用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>
如果這兩個同級塊級元素都應(yīng)用了position:absolute;這兩個元素會進行重疊，子元素(下)顯示在前面阔籽，那是因為默認代碼靠后的元素的z-index比較大流妻。
上面的案例中，將第二個子級元素換為內(nèi)聯(lián)元素笆制，子元素(下)的起點位置并沒有改變绅这。
試試給代碼中的第一個元素的style加上display:inline;看看上面的子元素是內(nèi)聯(lián)元素的話會如何顯示。
<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>
現(xiàn)在調(diào)換下應(yīng)用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>
第一個子元素是內(nèi)聯(lián)元素的話——
<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>
綜上：不管是塊級元素還是內(nèi)聯(lián)元素應(yīng)用position:absolute并且不設(shè)置TRBL项贺，它都會默認在父級元素的content-box區(qū)浮動君躺。原來的起點位置也是應(yīng)用絕對定位后的起點位置，只不過如果應(yīng)用了position:absolute的內(nèi)聯(lián)元素左邊也有內(nèi)聯(lián)元素的話开缎，它的起點位置會變得更靠前棕叫，直到緊挨左邊內(nèi)聯(lián)元素的邊界。
綜合案例：看看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>
在上面代碼的基礎(chǔ)上分別應(yīng)用以下的定位后看看效果奕删，并理解俺泣。
案例診斷：
-
給祖先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;"
應(yīng)用：消除環(huán)繞浮動元素的影響
父級，position:relative（不設(shè)TRBL）
子級完残，第一個div的float:left伏钠；第二個div的position:absolute（不設(shè)TRBL）
因為第二個子級div元素默認會在父級元素的content-box區(qū)浮動，它可以消除上一個同級子級div元素的環(huán)繞浮動影響谨设。
案例代碼——
<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消除浮動環(huán)繞的影響測試</div>
</div>
顯示——
給父級元素加上position:relative熟掂，給第二個子級元素加上position:absolute后，顯示——
我們看到扎拣，確實是消除了環(huán)繞浮動元素環(huán)繞的影響赴肚，position:absolute的優(yōu)先級高，所以float元素被遮住了二蓝，并不是消失了誉券。另外看到contain元素的高度不受子元素的影響了，因為它們都脫離文檔流了刊愚。
參考顏色
修改記錄
- 2016.12.23增補案例理解默認浮動
