資訊專欄INFORMATION COLUMN
摘要：絕對定位的特性包裹性包裹性展示跟一樣也具有包裹性兩者的包裹性都類似于使元素化破壞性破壞性展示相對于引起父元素塌陷要更進(jìn)一步上面的例子就可以看出元素完全脫離文檔流并且被其它盒子以及盒子內(nèi)的文本無視替代方案由于濫用會(huì)降低擴(kuò)展性和維護(hù)性所以需要
絕對定位的特性 包裹性
absolute包裹性展示
跟float一樣,absolute也具有包裹性,兩者的包裹性都類似于使元素inline-block化.
破壞性absolute破壞性展示
相對于float引起父元素塌陷,absolute要更進(jìn)一步,上面的例子就可以看出,absolute元素完全脫離文檔流,并且被其它盒子以及盒子內(nèi)的文本無視
absolute替代方案由于absolute濫用會(huì)降低擴(kuò)展性和維護(hù)性,所以需要盡量少使用absolute
使用margin代替absolute為價(jià)格標(biāo)簽定位
通過給span標(biāo)簽設(shè)置一個(gè)div,設(shè)置div的margin實(shí)現(xiàn)
圖片圖標(biāo)絕對定位覆蓋
這個(gè)案例有三個(gè)圖標(biāo)覆蓋,第一個(gè)hot圖標(biāo)使用absolute+margin,設(shè)置margin調(diào)整位置緊緊跟隨header導(dǎo)航最后一個(gè)導(dǎo)航鏈接字體;第二個(gè)使用元素脫離文檔流,后面的圖片直接無視absolute的原理實(shí)現(xiàn)重疊;第三個(gè)vip圖標(biāo)設(shè)置absolute屬性后,位置跟原先的位置一樣,也就是在圖片的后面緊緊跟隨,然后設(shè)置margin-left圖標(biāo)寬度的負(fù)值就可以完成圖標(biāo)覆蓋,這里需要注意的一點(diǎn)是為了保證圖片和圖標(biāo)之間沒有空隙,需要在它們之間設(shè)置注釋
使用無依賴的絕對定位實(shí)現(xiàn)下拉框
這個(gè)案例我們主要利用的是absolute的跟隨性,配合margin使搜索結(jié)果定位到搜索框下邊框
居中及邊緣對齊定位
第一個(gè)例子是圖片居中對齊,父元素設(shè)置text-align:center,子元素由于是inline-block元素,所以會(huì)居中,為了兼容IE瀏覽器,需要在圖片前面設(shè)置 ,因?yàn)?b> 需要占據(jù)0.25em所以我們在父元素設(shè)置letter-spacing:-.25em
空格寬度參考
第二個(gè)例子是右下角邊緣對齊,父元素設(shè)置text-align:right,子元素設(shè)置position:fixed固定定位,并且需要display:inline為了防止錯(cuò)位
各種對齊溢出技巧實(shí)例
第一個(gè)例子是讓星號(hào)絕對定位,然后它脫離文檔流,不占用任何空間,所以后面的文字對齊就不受影響
第二個(gè)例子圖標(biāo)使用絕對定位,然后讓小圖標(biāo)做偏移圖表寬度,這就實(shí)現(xiàn)了圖文對齊
第三個(gè)例子是文字溢出,使用無依賴絕對定位,文字不斷行
absolute與width/height容器無需固定width/height值,內(nèi)部元素可拉伸
這個(gè)例子使用絕對對位元素left: 0; top: 0; right: 0; bottom: 0;可以實(shí)現(xiàn)寬高百分之百的拉伸特性,父元素設(shè)置inline-block具有包裹性,我們在這里設(shè)置的半透明遮罩層可以完美覆蓋圖片
容器拉伸,內(nèi)部元素支持百分比width/height值
一般情況下,父級容器設(shè)置height:auto,子元素不能使用百分比高度,這時(shí),子元素設(shè)置left: 0; top: 0; right: 0; bottom: 0;利用絕對元素拉伸特性,也可以使用百分比高度
left/right拉伸和width同時(shí)存在
同時(shí)設(shè)置left/right與width起作用的會(huì)是width,這時(shí)候再使用margin-left/margin-right:auto會(huì)使絕對定位水平居中,垂直居中同理,這也就是使用absolute的水平垂直居中的原理
使用absolute實(shí)現(xiàn)兩欄等高布局
這個(gè)例子的實(shí)現(xiàn)思路是設(shè)置一個(gè)width:100%;height:999em的空絕對定位元素,放在側(cè)邊欄,給側(cè)邊欄添加position:relative限制,然后在絕對定位元素同級放置一個(gè)設(shè)置position:relative;z-index:1元素包裹住圖片,把圖片都設(shè)置為display:block,最后把容器設(shè)置overflow:hidden
實(shí)現(xiàn)原理是由于絕對定位元素?zé)o高度特性無寬度特性,我們可以偽造一個(gè)高度足夠高的絕對定位層,同時(shí)設(shè)置父元素溢出隱藏,那么其多出來的高度就不會(huì)顯示了,也就實(shí)現(xiàn)了看上去的等高布局效果
absolute與網(wǎng)頁整體布局仿慕課網(wǎng)的移動(dòng)端頁面
深入理解absolute
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/112017.html
摘要：在使用相對定位時(shí)，無論元素是否進(jìn)行移動(dòng)，元素依然占據(jù)原來的空間。放置絕對定位對象在可視區(qū)域之外會(huì)導(dǎo)致滾動(dòng)條出現(xiàn)。相對定位是相對于元素在文檔流中初始位置的，而絕對定位是相對于最近的已經(jīng)定位的祖先元素。 CSS2.0 HandBook上的解釋： 設(shè)置此屬性值為 absolute 會(huì)將對象拖離出正常的文檔流絕對定位而不考慮它周圍內(nèi)容的布局。假如其他具有不同 z-index 屬性的對象已經(jīng)占...
摘要：當(dāng)父元素設(shè)置了的，子元素為時(shí)，設(shè)置無效當(dāng)父元素設(shè)置了時(shí)，子元素超出父元素部分無效只能限制的層級相當(dāng)于自身進(jìn)行定位，相對于邊界會(huì)影響其他元素定位，而無影響自定義拖拽效果同時(shí)存在，無效同理，無效可提高層疊級數(shù)父元素的較大排前面數(shù)值排在上，當(dāng)前層 relative 1.當(dāng)父元素設(shè)置了relative的zindex，子元素為absolute時(shí)，設(shè)置zindex無效2.當(dāng)父元素relative設(shè)...
摘要：以上兩點(diǎn)點(diǎn)可以總結(jié)出，相對定位總是以父級左上角為原點(diǎn)進(jìn)行定位的，如果父級不存在，則以瀏覽器左上角進(jìn)行定位。 贊助我以寫出更好的文章，give me a cup of coffee? 2017最新最全前端面試題 案例代碼1 .rel{ border: 1px solid #ccc; height: 200px; ...
前端技術(shù)之_CSS詳解第六天--完結(jié) 一、復(fù)習(xí)第五天的知識(shí) a標(biāo)簽的偽類4個(gè)： a:link 沒有被點(diǎn)擊過的鏈接 a:visited 訪問過的鏈接 a:hover 懸停 a:active 按下鼠標(biāo)不松手 順序就是“love hate”準(zhǔn)則。 可以簡寫： 1 a{ 3 } 4 a:hover{ 6 } background系列屬性，CSS2.1層面 ...
摘要：有三種情況將使得元素脫離文檔流而存在，分別是浮動(dòng)，絕對定位，固定定位。我的回答是相對自己文檔流中的原始位置定位。這里就不解釋脫離文檔流的問題，主要研究它的定位問題。 一 前言 CSS定位是CSS布局只能夠重要的一環(huán)。本篇文章帶你解讀定位屬性，可以讓你更加深入的理解定位帶來的一些特性，熟練使用CSS布局。 二 正文 1.文檔流布局的概念 將窗體自上而下分成一行行， 并在每行中按從左至右的...
閱讀 778·2021-09-30 09:47
閱讀 2969·2021-09-04 16:40
閱讀 968·2019-08-30 13:18
閱讀 3545·2019-08-29 16:22
閱讀 1649·2019-08-29 12:36
閱讀 689·2019-08-29 11:11
閱讀 1551·2019-08-26 13:47
閱讀 1211·2019-08-26 13:32
