絕對定位:子元素進行了絕對定位會不會跳出父級元素。
阿新 • • 發佈:2019-02-12
絕對定位(position:absolute)
根據前天所學,給某個元素進行絕對定位後,如果沒有相近的擁有定位屬性的父級元素,那麼它就定位就是跟據整個document來定位,而且脫離了文件流。
假設:一個div裡包含了一個span標籤,只對span標籤進行絕對定位,讓它跑到div塊的外面去,看看是否能成功。
<span style="font-size:18px;"> 程式碼: <div><span></span></div></span>
給它加個樣式:
body{ margin:0; } div{ width:200px; height:200px; background:black; margin:50px auto; } span{ width:50px; height:50px; background:red; position:absolute; left:10px; top:10px; }
經在編輯器裡測試,結果是:span標籤跳脫了div,根據html進行了定位。答案是會。
注意點一:如果對span只加了絕對定位屬性,而沒有寫具體的畫素和方向,那麼span標籤仍然在父級左上角。
並且會顯示出來。如果沒加定位屬性,div內的span是看不到了,因為是行內元素無法定義寬高,審查元素顯示0*0。