IT工程師數位筆記本

前面的話

　　前面已經介紹了定位的偏移和層疊，例子中大量的應用了絕對定位。因為相較于相對定位和固定定位，絕對定位在實際中應用頻率更高、應用場景更廣泛。本文將介紹使用絕對定位時的具體細節

定義

　　當元素絕對定位時，會從文檔流中完全刪除。元素位置相對于最近的已定位祖先元素，如果元素沒有已定位的祖先元素，那么它的位置相對于初始包含塊document，其邊界根據偏移屬性放置。元素定位后生成一個塊級框，而不論原來它在正常流中生成何種類型的框。定位元素不會流入其他元素的內容，反之亦然。

　　[注意]如果文檔可滾動，絕對定位元素會隨著它滾動，因為元素最終會相對于正常流的某一部分定位。

　　//滾動滾動條時會發現，絕對定位元素會隨著其滾動，但固定定位不會

特性

　　absolute和float都可以觸發元素的BFC屬性，且都具有包裹性和破壞性，所以對于一些應用場景，這兩個屬性可以進行替換。關于float屬性的詳細信息移步至此

【1】包裹性

　　元素絕對定位后，會為其后代元素建立一個包含塊。且若該絕對定位元素不設置寬度，寬度由內容撐開。

　　[注意]浮動的包含塊會延伸，進而包含所有后代浮動元素，但絕對定位的包含塊并不會包含后代的定位元素，只是作為后代定位元素的定位父級

【2】破壞性

　　元素絕對定位后，會脫離文檔流，若父級不設置高度，則父級高度塌陷；若父級為行內元素，無其他內容，則父級寬度也將塌陷

　　//父級元素有10px的padding，且背景顏色為天藍色

【3】去浮動

　　元素絕對定位后，元素原來的浮動效果將失效

【4】偏移特性

　　如果使用top、right、bottom、left這4個偏移特性來描述元素4個邊的放置位置，那么元素的高度和寬度將由這些偏移隱含確定，元素將會拉伸

　　使用偏移屬性拉伸的絕對定位元素，其內部元素支持百分比width/height值。通常情況下，元素高度百分比要想起作用，需要父級窗口的高度值不是auto；但是如果容器由絕對定位拉伸形成，百分比高度值也是支持的

display

　　當元素絕對定位后，元素可以改變display屬性，但各瀏覽器解析不一致

　　【1】IE8+瀏覽器解析正常

　　【2】firefox和safari瀏覽器只有切換為display:none時才會重新渲染，其他值相互切換時無效

　　【3】chrome瀏覽器切換到display:inline時渲染無效，其他值相互切換時渲染正常

　　【4】IE7-瀏覽器將絕對定位的元素全部渲染為inline-block元素，只有切換為display:none時才會重新渲染，其他值相互切換時無效

　　[注意]解決IE7-瀏覽器絕對定位元素渲染為inline-block元素的bug很簡單，只需要在絕對定位的元素外面套一個空的<div>即可

<div>
    <div style="position:absolute"></div>
</div>

clip

　　絕對定位或固定定位元素才可以使用clip屬性。絕對定位元素常配合clip屬性達到元素隱藏的效果。關于clip屬性的詳細信息移步至此

.hide{
    position:absolute;
    clip: rect(0,0,0,0);
}

靜態位置

　　當元素絕對定位后，若該元素的格式化屬性不發生變化，則該元素處于靜態位置。關于絕對定位元素格式化的相關內容移步至此。元素的靜態位置是指元素在正常流中原本的位置，更確切的講，頂端的靜態位置是從包含塊的上邊界到假想框的上外邊距邊界之間的距離。假想框是假設元素position屬性為static時元素的第一個框。

　　但對于居中對齊的行內元素來說，將元素設置為absolute或fixed會發生靜態位置跳動問題。而relative或static則不會有此問題。這是因為元素默認的居中對齊是元素的內容中線對應父級塊級元素中線，而當元素絕對定位或固定定位之后，定位元素左邊界將與其父級塊級元素的中線對齊。

overflow

　　當overflow在絕對定位元素和其包含塊之間時，絕對定位元素不會被父級overflow屬性剪裁。關于overflow失效解決方法移步至此

　　可以應用絕對定位元素的overflow屬性失效實現按鈕外置的效果

.box{
    width: 100px;
    height: 100px;
    overflow: auto;
}    
.in{
    width: 100%;
    display: inline-block;
    height: 200px;
    background-color: pink;
}
.close{
    position:absolute;
    margin: 0 0 0 -20px;
    font-size: 20px;
    line-height: 20px;
    border: 2px solid;
    border-radius: 50%;
    cursor:pointer;
}

<div class="box">
    <div class="in">測試內容</div><!--             
     --><span class="close">&times;</span>
</div>