1. 程式人生 > >絕對定位:子元素進行了絕對定位會不會跳出父級元素。

絕對定位:子元素進行了絕對定位會不會跳出父級元素。

   絕對定位(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。