成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

Absolute 和 Relative

李增田 / 1810人閱讀

摘要：在中，元素的大小是不變的，通過(guò)設(shè)置等屬性，改變?cè)叵鄬?duì)于自身的位置。所以被的元素，是可能會(huì)和其他元素重疊的，但是不會(huì)對(duì)之后的元素的位置有影響。被稱為絕對(duì)定位。絕對(duì)定位的元素是根據(jù)其決定的，完全脫離，對(duì)后續(xù)的兄弟節(jié)點(diǎn)的布局無(wú)任何影響。

花了一個(gè)周末的時(shí)間，把 css-postion 的標(biāo)準(zhǔn)讀了一遍，把關(guān)于 Absolute 和 Relative 的部分的理解在這里記錄一下。

Positioning schemes

在 css 中，有三種定位方案:

Normal flow

Floats

Absolute positioning

Normal flow 是最常見(jiàn)的 BFC 和 IFC，也就是常說(shuō)的塊級(jí)元素從上到下，內(nèi)聯(lián)元素從左到右布局的情況；Floats 即常見(jiàn)的盒子水平布局的情況；Absolute positioning 讓盒子完全脫離 Normal flow， 通過(guò)設(shè)置 top，left 等屬性來(lái)決定 position。

注意：這里只說(shuō)到 Floats 和 Absolute 是 out-of-flow 的，沒(méi)有說(shuō) Relative。我看過(guò)很多文章都說(shuō) Relative 也讓盒子脫離了流，是錯(cuò)誤的說(shuō)法（我就深受其害）。

Containing Blocks

一個(gè)元素的盒子的位置和大小通常是由一個(gè)特定的矩形計(jì)算出來(lái)的，這個(gè)特定的矩形就是元素的 containing block。 對(duì)于 static 和 relative 的元素，它的 containing block 同普通盒子，一般是指包含它的最近的父級(jí)元素（nearest ancestor）。對(duì)于 fixed（不在這次文章之內(nèi)，按下不表）和 absolute 有如下的表現(xiàn):

containing block 被最近的positon不等于static的祖先元素創(chuàng)建:

如果最近的祖先元素是塊級(jí)元素(block-level)，containing block 由盒子的內(nèi)邊距層(padding edge) 創(chuàng)建。

如果最近的祖先元素是內(nèi)聯(lián)級(jí)元素(inline-level)，那么containing block 由書(shū)寫(xiě)模式的 direction 屬性決定。這種情況比較少用，不分析了。

如果沒(méi)有祖先元素，或者祖先元素沒(méi)有設(shè)置 position 為 static 以外的值，那么 containing block 就是 initial containing block。

注意：對(duì)于上面第三點(diǎn)，initial containing block 并不是指 body， 我看到很多文章都把這里說(shuō)成 body。

Relative positioning

相對(duì)定位：是相對(duì)于自己定位。在 normal flow 中，元素的大小是不變的，通過(guò)設(shè)置top等屬性，改變?cè)叵鄬?duì)于自身的位置。所以被 relative 的元素，是可能會(huì)和其他元素重疊的，但是不會(huì)對(duì)之后的元素的位置有影響。 一個(gè)相對(duì)定位的盒子會(huì)為后代節(jié)點(diǎn)創(chuàng)建一個(gè)新的絕對(duì)定位的 containing block。

Absolute positioning

對(duì)于 position： absolute 和 position： fixed 都是指 Absolute positioning。 本文暫只討論 position: absolute。 Absolute positioning 被稱為絕對(duì)定位。 絕對(duì)定位的元素是根據(jù)其 containing block 決定的，完全脫離 normal flow， 對(duì)后續(xù)的兄弟節(jié)點(diǎn)的布局無(wú)任何影響。一個(gè)絕對(duì)定位的盒子會(huì)為后代節(jié)點(diǎn)創(chuàng)建一個(gè)新的絕對(duì)定位的 containing block 和為子節(jié)點(diǎn)創(chuàng)建一個(gè) normal flow 的containing block

top, right, bottom, left

當(dāng)一個(gè)元素的 position 屬性被設(shè)置了除 static 之外的值， 這個(gè)元素的位置可以被 top, right, bottom, left這四個(gè)物理屬性決定。注意，在同時(shí)設(shè)置 left、right 或者 bottom、top 的時(shí)候會(huì)出現(xiàn)競(jìng)爭(zhēng)情況。

結(jié)尾

因?yàn)榕笥言趯W(xué) css，需要我在旁指導(dǎo) 而 css 一直是我的弱項(xiàng)，所以我花了一個(gè)周末時(shí)間把 css-position 的標(biāo)準(zhǔn)梳理了下，這樣指導(dǎo)起來(lái)也比較有底氣。這篇文章基本都是對(duì)下面參考的鏈接的筆記，我之前學(xué)這部分的內(nèi)容時(shí)，都是從網(wǎng)上找的別人的博客看的，有很多和標(biāo)準(zhǔn)出入的地方，這一天也解了不少的疑惑；如果有想學(xué)的同學(xué)，還請(qǐng)直接看 css-positon 的草案比較靠譜，而且草案中 example 也有不少。

參考:

草案

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/115068.html

相關(guān)文章

  • 相對(duì)定位(Relative positioning)

    摘要：當(dāng)一個(gè)盒根據(jù)常規(guī)流或者浮動(dòng)擺放好后，它可能會(huì)相對(duì)于該位置移動(dòng)，這叫相對(duì)定位。 當(dāng)一個(gè)盒根據(jù)常規(guī)流或者浮動(dòng)擺放好后，它可能會(huì)相對(duì)于該位置移動(dòng)，這叫相對(duì)定位。 相對(duì)定位的盒保持它在常規(guī)流中的大小，包括換行和空格都會(huì)原樣保留 relative與absolute,fixed relative與absolute的關(guān)系 在例1中,absolute元素的top/left:0的定位在瀏覽器窗口的左...

    cyixlq 評(píng)論0 收藏0

  • 通過(guò)案例理解position:relative和position:absolute

    摘要：并沒(méi)有脫離普通流，只是視覺(jué)上發(fā)生的偏移。上面的案例中，將第二個(gè)子級(jí)元素?fù)Q為內(nèi)聯(lián)元素，子元素下的起點(diǎn)位置并沒(méi)有改變。 w3school過(guò)了HTML的知識(shí)之后，覺(jué)得要自己?jiǎn)渭兊厝タ兄R(shí)點(diǎn)有點(diǎn)枯燥，然后自己也很容易忘記，所以便找具體的網(wǎng)站練手便補(bǔ)上不懂的知識(shí)點(diǎn)。position:relative和postion:absolute困擾了我快一個(gè)星期之久，網(wǎng)上找到的資料魚(yú)龍混雜，剛確定這樣的理解...

    miqt 評(píng)論0 收藏0

  • 通過(guò)案例理解position:relative和position:absolute

    摘要：并沒(méi)有脫離普通流，只是視覺(jué)上發(fā)生的偏移。上面的案例中，將第二個(gè)子級(jí)元素?fù)Q為內(nèi)聯(lián)元素，子元素下的起點(diǎn)位置并沒(méi)有改變。 w3school過(guò)了HTML的知識(shí)之后，覺(jué)得要自己?jiǎn)渭兊厝タ兄R(shí)點(diǎn)有點(diǎn)枯燥，然后自己也很容易忘記，所以便找具體的網(wǎng)站練手便補(bǔ)上不懂的知識(shí)點(diǎn)。position:relative和postion:absolute困擾了我快一個(gè)星期之久，網(wǎng)上找到的資料魚(yú)龍混雜，剛確定這樣的理解...

    codergarden 評(píng)論0 收藏0

  • 探究position定位中absolute和relative的異同

    摘要：總結(jié)一下定位相對(duì)于誰(shuí)進(jìn)行定位有點(diǎn)復(fù)雜就是找出定位元素父元素鏈上的所有父元素，由近到遠(yuǎn)哪個(gè)元素不是默認(rèn)定位即定位的，那么就相對(duì)于它進(jìn)行定位。當(dāng)父元素鏈上所有父元素都是默認(rèn)定位，那么定位就是相對(duì)于元素的，效果和定位差不多。 相信學(xué)過(guò)CSS的同學(xué)都曾經(jīng)對(duì)于position的各種屬性很困惑，尤其是absolute和relative定位，簡(jiǎn)直就是傻傻分不清，筆者寫(xiě)這篇文章就是希望通過(guò)代碼實(shí)驗(yàn)的方...

    NickZhou 評(píng)論0 收藏0

  • css position: absolute、relative詳解

    摘要：在使用相對(duì)定位時(shí)，無(wú)論元素是否進(jìn)行移動(dòng)，元素依然占據(jù)原來(lái)的空間。放置絕對(duì)定位對(duì)象在可視區(qū)域之外會(huì)導(dǎo)致滾動(dòng)條出現(xiàn)。相對(duì)定位是相對(duì)于元素在文檔流中初始位置的，而絕對(duì)定位是相對(duì)于最近的已經(jīng)定位的祖先元素。 CSS2.0 HandBook上的解釋： 設(shè)置此屬性值為 absolute 會(huì)將對(duì)象拖離出正常的文檔流絕對(duì)定位而不考慮它周?chē)鷥?nèi)容的布局。假如其他具有不同 z-index 屬性的對(duì)象已經(jīng)占...

    h9911 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<