javascript - HTML 中布局的問題
問題描述
對position:absoulte 這個屬性理解不到位，希望有人能提供解答，感謝，這里我給 子p 設置position:absoulte ,結果他父級的p所占空間消失<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>
問題解答
回答1：因為當元素設置absolute的時候，已經脫離文檔流了。在父元素內部是不占空間的
回答2：你的第一個例子父元素是沒有設置高度的，子元素也沒有高度，所以不顯示。
position:absolute
是絕對定位，脫離文檔流，而且你沒有設置top/right/bottom/left等值，所以同級的兩個p會重疊
回答3：CSS四種定位方式：static：默認定位（即無定位，文檔流怎么排下來就怎么定位）
relative：相對定位，相對于原始位置定位，所謂的原始位置，即static定位的位置
absolute：絕對定位，相對于static定位以外的第一個父元素定位。從當前元素開始向上查找定位元素直至根元素，無論遇到的第一個父級元素是relative還是absolute，或者是fixed定位的元素，當前元素就相對于該元素進行定位，并且這個父級元素不一定是當前元素的第一級父元素。如果沒有找到任何非static的父級元素，則相對于根元素html進行定位。
fixed：固定定位，相對于瀏覽器窗口定位
初學者記住上面這些就行了。
按w3school的說法：
設置為絕對定位的元素框從文檔流完全刪除，并相對于其包含塊定位，包含塊可能是文檔中的另一個元素或者是初始包含塊。 絕對定位的元素的位置相對于最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那么它的位置相對于最初的包含塊。 絕對定位使元素的位置與文檔流無關，因此不占據空間。
引用中的內容我認為確切的說法應該是“相對于最近的已定位的包含塊或初始包含塊”，因為如果說法是“相對于包含塊”，那為什么一定要至少是relative的元素。（應該去查下w3c...衰）什么是包含塊？containing blockcss 包含塊(Containing Box)包含塊是瀏覽器計算元素位置的一個虛擬的矩形區域，計算元素定位的起始位置是該矩形區域的左上角，也就是原點，坐標位置為(0,0)，定位元素的top、left相對于該原點確定。包含塊就是元素定位的參考系。可以認為這個矩形區域就是創建它的元素，但不是這個元素，只是虛擬的一個東西。
<!-- p元素會創建一個包含塊，用于計算p元素的尺寸和位置 --><!-- 可以認為包含塊就是p元素 --><p> <p>Hello word.<p></p>
包含塊只是用于計算元素的位置和尺寸。
為什么父級元素所占空間消失？因為設置為position: absolute的元素脫離了文檔流（normal flow），形成了獨立的BFC。頁面中每個BFC都是獨立的一塊渲染區域，互不影響，但是它的位置信息，依然由它在normal flow中的包含塊決定。所謂的流就是瀏覽器將元素在瀏覽器視口從上到下，從左到右一個一個的排版渲染出來，形成的一個類似水流一樣 的概念。默認一個頁面只有一個“流”，就是文檔流（normal flow），如果頁面有定位元素、浮動元素，就會形成定位流、浮動流，而normal flow由文檔的根元素html形成。流你可以認為是桌面上疊起來的一張張紙，每一張紙都是一個“流”，只是這些紙不一定都是一樣的大小。
我對BFC的理解 - wmsj100
回答4：1.首相父元素沒有設置固定的寬高。2.子元素浮動時，跳出文檔流，沒辦法撐開父元素，所以父元素不見了。
回答5：這里你將絕對定位和浮動混合在使用，不方便初學者理解。兩者應該分開更容易理解一些。
使用絕對定位的情況，要注意：
1.絕對定位absolute一般是要配合相對定位relative一起使用的。絕對定位到底是相對于哪個元素進行定位的，就給這個定位父級添加屬性 position:relative; 要是沒有設置這個定位父級，那么絕對定位的元素就會默認<html>是定位父級。2.所有絕對定位的元素，一定要初始化top/left，即使是0，也要寫上。top: 0; left:0;3.絕對定位的元素相當于脫離了文檔流，就不再占據空間了。所以自然也無法再撐起父級元素的寬高 <!-- 這個父級p是定位父級，那么添加屬性 position:relative; --> <p style=’position:relative’><!-- 絕對定位元素初始化位置top/left --> <p style='position: absolute;top: 0;left: 0'> 111 </p> <p style='position: absolute;top: 0;left: 0'> 222 </p> </p>
關于浮動float的相關理解要另行百度啦~
回答6：你給父級設個寬高，占位就還在了
相關文章：
1. javascript - 原生canvas中如何獲取到觸摸事件的canvas內坐標?2. showpassword里的this 是什么意思？代表哪個元素3. mysql scripts提示 /usr/bin/perl: bad interpreter4. css3 - css怎么實現圖片環繞的效果5. html - vue項目中用到了elementUI問題6. 對mysql某個字段監控的功能7. android - 用textview顯示html時如何寫imagegetter獲取網絡圖片8. JavaScript事件9. css3 - border-bottom 的長度可否超過盒子的寬度呢？實現如下圖效果。（我的書下面的線）10. mysql優化 - mysql EXPLAIN之后怎么看結果進行優化 ？
網公網安備