<p style="width: 40%; background-color: #aa0000; float: left">
<p >
<p style="position: absolute">
111
</p>
<p style="position: absolute">
222
</p>
</p>
</p>
<p style="width: 20%; background-color: #00aa00; float: left">222</p>
<p style="width: 40%; background-color: #0000aa; float: left">333</p>
<p style="width: 40%;height: 100px; background-color: #aa0000; float: left">
<p >
<p style="position: absolute">
111
</p>
<p style="position: absolute">
222
</p>
</p>
</p>
<p style="width: 20%; background-color: #00aa00; float: left">222</p>
<p style="width: 40%; background-color: #0000aa; float: left">333</p>
6
0
0
Following the voice in heart.
因?yàn)楫?dāng)元素設(shè)定absolute的時(shí)候，已經(jīng)脫離文件流了。在父元素內(nèi)部是不佔(zhàn)空間的
你的第一個(gè)例子父元素是沒(méi)有設(shè)定高度的，子元素也沒(méi)有高度，所以不顯示。
position:absolute是絕對(duì)定位，脫離文檔流，而且你沒(méi)有設(shè)定top/right/bottom/left等值，所以同級(jí)的兩個(gè)p會(huì)重疊
static：預(yù)設(shè)定位（即無(wú)定位，文件流怎麼排下來(lái)就怎麼定位）
relative：相對(duì)定位，相對(duì)於原始位置定位，所謂的原始位置，即static定位的位置
absolute：絕對(duì)定位，相對(duì)於static定位以外的第一個(gè)父元素定位。從當(dāng)前元素開(kāi)始向上尋找定位元素直至根元素，無(wú)論遇到的第一個(gè)父級(jí)元素是relative還是absolute，或者是fixed定位的元素，當(dāng)前元素就相對(duì)於該元素進(jìn)行定位，而這個(gè)父級(jí)元素不一定是目前元素的第一級(jí)父元素。如果沒(méi)有找到任何非static的父級(jí)元素，則相對(duì)於根元素html進(jìn)行定位。
fixed：固定定位，相對(duì)於瀏覽器視窗定位
初學(xué)者記住上面這些就行了。
按w3school的說(shuō)法：
設(shè)定為絕對(duì)定位的元素框
從文檔流完全刪除，並相對(duì)於其包含塊定位，包含塊可能是文檔中的另一個(gè)元素或者是初始包含塊。
絕對(duì)定位的元素的位置相對(duì)於最近的已定位祖先元素，如果元素沒(méi)有已定位的祖先元素，那麼它的位置相對(duì)於最初的包含塊。
絕對(duì)定位使元素的位置與文檔流無(wú)關(guān)，因此不佔(zhàn)據(jù)空間。
引用中的內(nèi)容我認(rèn)為確切的說(shuō)法應(yīng)該是“相對(duì)於最近的已定位的包含塊或初始包含塊”，因?yàn)槿绻f(shuō)法是“相對(duì)於包含塊”，那為什麼一定要至少是relative的元素。 （應(yīng)該去查w3c...衰）
什麼是包含塊？
containing block
css 包含區(qū)塊(Containing Box)
包含區(qū)塊是瀏覽器計(jì)算元素位置的一個(gè)虛擬的矩形區(qū)域，計(jì)算元素定位的起始位置是該矩形區(qū)域的左上角，也就是原點(diǎn)，座標(biāo)位置為( 0,0)，定位元素的top、left相對(duì)於該原點(diǎn)確定。包含塊就是元素定位的參考系。
可以認(rèn)為這個(gè)矩形區(qū)域就是創(chuàng)造它的元素，但不是這個(gè)元素，只是虛擬的一個(gè)東西。
<!-- p元素會(huì)創(chuàng)建一個(gè)包含塊，用于計(jì)算p元素的尺寸和位置 -->
<!-- 可以認(rèn)為包含塊就是p元素 -->
<p>
<p>Hello word.<p>
</p>包含塊只是用來(lái)計(jì)算元素的位置和尺寸。
因?yàn)樵O(shè)定為position: absolute的元素脫離了文件流（normal flow），形成了獨(dú)立的BFC。
頁(yè)面中每個(gè)BFC都是獨(dú)立的一塊渲染區(qū)域，互不影響，但是它的位置信息，依然由它在normal flow中的包含塊決定。
所謂的流就是瀏覽器將元素在瀏覽器視口從上到下，從左到右一個(gè)一個(gè)的排版渲染出來(lái)，形成的一個(gè)類(lèi)似水流一樣 的概念。
預(yù)設(shè)一個(gè)頁(yè)面只有一個(gè)“流”，就是文檔流（normal flow），如果頁(yè)面有定位元素、浮動(dòng)元素，就會(huì)形成定位流、浮動(dòng)流，而normal flow由文檔的根元素html形成。
流你可以認(rèn)為是桌面上疊起來(lái)的一張紙，每一張紙都是一個(gè)“流”，只是這些紙不一定都是一樣的大小。
我對(duì)BFC的理解 - wmsj100
1.首相父元素沒(méi)有設(shè)定固定的寬高。
2.子元素浮動(dòng)時(shí)，跳出文檔流，沒(méi)辦法撐開(kāi)父元素，所以父元素不見(jiàn)了。
這裡你將絕對(duì)定位和浮動(dòng)混合在使用，不方便初學(xué)者理解。兩者應(yīng)該分開(kāi)更容易理解一些。
使用絕對(duì)定位的情況，要注意：
1.絕對(duì)定位absolute一般是要配合相對(duì)定位relative一起使用的。絕對(duì)定位到底是相對(duì)于哪個(gè)元素進(jìn)行定位的，就給這個(gè)定位父級(jí)添加屬性 position:relative;
要是沒(méi)有設(shè)置這個(gè)定位父級(jí)，那么絕對(duì)定位的元素就會(huì)默認(rèn)<html>是定位父級(jí)。
2.所有絕對(duì)定位的元素，一定要初始化top/left，即使是0，也要寫(xiě)上。top: 0; left:0;
3.絕對(duì)定位的元素相當(dāng)于脫離了文檔流，就不再占據(jù)空間了。所以自然也無(wú)法再撐起父級(jí)元素的寬高
<!-- 這個(gè)父級(jí)p是定位父級(jí)，那么添加屬性 position:relative; -->
<p style='position:relative'>
<!-- 絕對(duì)定位元素初始化位置top/left -->
<p style="position: absolute;top: 0;left: 0">
111
</p>
<p style="position: absolute;top: 0;left: 0">
222
</p>
</p>
關(guān)於浮動(dòng)float的相關(guān)理解要另行百度啦~
