絕對定位(Absolute positioning)

絕對定位的特性

包裹性

absolute包裹性展現

跟float同樣,absolute也具備包裹性,二者的包裹性都相似於使元素inline-block化.

破壞性

absolute破壞性展現

相對於float引發父元素塌陷,absolute要更進一步,上面的例子就能夠看出,absolute元素徹底脫離文檔流,而且被其它盒子以及盒子內的文本無視

absolute替代方案

因爲absolute濫用會下降擴展性和維護性,因此須要儘可能少使用absolute

使用margin代替absolute爲價格標籤訂位

經過給span標籤設置一個div,設置div的margin實現

圖片圖標絕對定位覆蓋

這個案例有三個圖標覆蓋,第一個hot圖標使用absolute+margin,設置margin調整位置牢牢跟隨header導航最後一個導航連接字體;第二個使用元素脫離文檔流,後面的圖片直接無視absolute的原理實現重疊;第三個vip圖標設置absolute屬性後,位置跟原先的位置同樣,也就是在圖片的後面牢牢跟隨,而後設置margin-left圖標寬度的負值就能夠完成圖標覆蓋,這裏須要注意的一點是爲了保證圖片和圖標之間沒有空隙,須要在它們之間設置註釋<!-- -->

使用無依賴的絕對定位實現下拉框

這個案例咱們主要利用的是absolute的跟隨性,配合margin使搜索結果定位到搜索框下邊框

居中及邊緣對齊定位

第一個例子是圖片居中對齊,父元素設置text-align:center,子元素因爲是inline-block元素,因此會居中,爲了兼容IE瀏覽器,須要在圖片前面設置&nbsp,由於&nbsp須要佔據0.25em因此咱們在父元素設置letter-spacing:-.25em

空格寬度參考

第二個例子是右下角邊緣對齊,父元素設置text-align:right,子元素設置position:fixed固定定位,而且須要display:inline爲了防止錯位

各類對齊溢出技巧實例

第一個例子是讓星號絕對定位,而後它脫離文檔流,不佔用任何空間,因此後面的文字對齊就不受影響

第二個例子圖標使用絕對定位,而後讓小圖標作偏移圖表寬度,這就實現了圖文對齊

第三個例子是文字溢出,使用無依賴絕對定位,文字不斷行

absolute與width/height

容器無需固定width/height值,內部元素可拉伸

這個例子使用絕對對位元素left: 0; top: 0; right: 0; bottom: 0;能夠實現寬高百分之百的拉伸特性,父元素設置inline-block具備包裹性,咱們在這裏設置的半透明遮罩層能夠完美覆蓋圖片

容器拉伸,內部元素支持百分比width/height值

通常狀況下,父級容器設置height:auto,子元素不能使用百分比高度,這時,子元素設置left: 0; top: 0; right: 0; bottom: 0;利用絕對元素拉伸特性,也可使用百分比高度

left/right拉伸和width同時存在

同時設置left/right與width起做用的會是width,這時候再使用margin-left/margin-right:auto會使絕對定位水平居中,垂直居中同理,這也就是使用absolute的水平垂直居中的原理

使用absolute實現兩欄等高佈局

這個例子的實現思路是設置一個width:100%;height:999em的空絕對定位元素,放在側邊欄,給側邊欄添加position:relative限制,而後在絕對定位元素同級放置一個設置position:relative;z-index:1元素包裹住圖片,把圖片都設置爲display:block,最後把容器設置overflow:hidden

實現原理是因爲絕對定位元素無高度特性無寬度特性,咱們能夠僞造一個高度足夠高的絕對定位層,同時設置父元素溢出隱藏,那麼其多出來的高度就不會顯示了,也就實現了看上去的等高佈局效果

absolute與網頁總體佈局

仿慕課網的移動端頁面

深刻理解absolute