絕對(duì)定位(Absolute positioning)

gaomysion 發(fā)布于2019-08-29 12:36 / 1747人閱讀

摘要：絕對(duì)定位的特性包裹性包裹性展示跟一樣也具有包裹性兩者的包裹性都類似于使元素化破壞性破壞性展示相對(duì)于引起父元素塌陷要更進(jìn)一步上面的例子就可以看出元素完全脫離文檔流并且被其它盒子以及盒子內(nèi)的文本無(wú)視替代方案由于濫用會(huì)降低擴(kuò)展性和維護(hù)性所以需要

絕對(duì)定位的特性 包裹性

absolute包裹性展示

跟float一樣,absolute也具有包裹性,兩者的包裹性都類似于使元素inline-block化.

破壞性

absolute破壞性展示

相對(duì)于float引起父元素塌陷,absolute要更進(jìn)一步,上面的例子就可以看出,absolute元素完全脫離文檔流,并且被其它盒子以及盒子內(nèi)的文本無(wú)視

absolute替代方案

由于absolute濫用會(huì)降低擴(kuò)展性和維護(hù)性,所以需要盡量少使用absolute

使用margin代替absolute為價(jià)格標(biāo)簽定位

通過(guò)給span標(biāo)簽設(shè)置一個(gè)div,設(shè)置div的margin實(shí)現(xiàn)

圖片圖標(biāo)絕對(duì)定位覆蓋

這個(gè)案例有三個(gè)圖標(biāo)覆蓋,第一個(gè)hot圖標(biāo)使用absolute+margin,設(shè)置margin調(diào)整位置緊緊跟隨header導(dǎo)航最后一個(gè)導(dǎo)航鏈接字體;第二個(gè)使用元素脫離文檔流,后面的圖片直接無(wú)視absolute的原理實(shí)現(xiàn)重疊;第三個(gè)vip圖標(biāo)設(shè)置absolute屬性后,位置跟原先的位置一樣,也就是在圖片的后面緊緊跟隨,然后設(shè)置margin-left圖標(biāo)寬度的負(fù)值就可以完成圖標(biāo)覆蓋,這里需要注意的一點(diǎn)是為了保證圖片和圖標(biāo)之間沒(méi)有空隙,需要在它們之間設(shè)置注釋

使用無(wú)依賴的絕對(duì)定位實(shí)現(xiàn)下拉框

這個(gè)案例我們主要利用的是absolute的跟隨性,配合margin使搜索結(jié)果定位到搜索框下邊框

居中及邊緣對(duì)齊定位

第一個(gè)例子是圖片居中對(duì)齊,父元素設(shè)置text-align:center,子元素由于是inline-block元素,所以會(huì)居中,為了兼容IE瀏覽器,需要在圖片前面設(shè)置 ,因?yàn)?b> 需要占據(jù)0.25em所以我們?cè)诟冈卦O(shè)置letter-spacing:-.25em

空格寬度參考

第二個(gè)例子是右下角邊緣對(duì)齊,父元素設(shè)置text-align:right,子元素設(shè)置position:fixed固定定位,并且需要display:inline為了防止錯(cuò)位

各種對(duì)齊溢出技巧實(shí)例

第一個(gè)例子是讓星號(hào)絕對(duì)定位,然后它脫離文檔流,不占用任何空間,所以后面的文字對(duì)齊就不受影響

第二個(gè)例子圖標(biāo)使用絕對(duì)定位,然后讓小圖標(biāo)做偏移圖表寬度,這就實(shí)現(xiàn)了圖文對(duì)齊

第三個(gè)例子是文字溢出,使用無(wú)依賴絕對(duì)定位,文字不斷行

absolute與width/height

容器無(wú)需固定width/height值,內(nèi)部元素可拉伸

這個(gè)例子使用絕對(duì)對(duì)位元素left: 0; top: 0; right: 0; bottom: 0;可以實(shí)現(xiàn)寬高百分之百的拉伸特性,父元素設(shè)置inline-block具有包裹性,我們?cè)谶@里設(shè)置的半透明遮罩層可以完美覆蓋圖片

容器拉伸,內(nèi)部元素支持百分比width/height值

一般情況下,父級(jí)容器設(shè)置height:auto,子元素不能使用百分比高度,這時(shí),子元素設(shè)置left: 0; top: 0; right: 0; bottom: 0;利用絕對(duì)元素拉伸特性,也可以使用百分比高度

left/right拉伸和width同時(shí)存在

同時(shí)設(shè)置left/right與width起作用的會(huì)是width,這時(shí)候再使用margin-left/margin-right:auto會(huì)使絕對(duì)定位水平居中,垂直居中同理,這也就是使用absolute的水平垂直居中的原理

使用absolute實(shí)現(xiàn)兩欄等高布局

這個(gè)例子的實(shí)現(xiàn)思路是設(shè)置一個(gè)width:100%;height:999em的空絕對(duì)定位元素,放在側(cè)邊欄,給側(cè)邊欄添加position:relative限制,然后在絕對(duì)定位元素同級(jí)放置一個(gè)設(shè)置position:relative;z-index:1元素包裹住圖片,把圖片都設(shè)置為display:block,最后把容器設(shè)置overflow:hidden

實(shí)現(xiàn)原理是由于絕對(duì)定位元素?zé)o高度特性無(wú)寬度特性,我們可以偽造一個(gè)高度足夠高的絕對(duì)定位層,同時(shí)設(shè)置父元素溢出隱藏,那么其多出來(lái)的高度就不會(huì)顯示了,也就實(shí)現(xiàn)了看上去的等高布局效果

absolute與網(wǎng)頁(yè)整體布局

仿慕課網(wǎng)的移動(dòng)端頁(yè)面

深入理解absolute