亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

由一個(gè)絕對(duì)定位引發(fā)overflow：auto滾動(dòng)問題產(chǎn)生的關(guān)于包含塊（containing bloc

enali / 1617人閱讀

摘要：前言今天在項(xiàng)目中有一個(gè)需求，就是一個(gè)可滾動(dòng)的列表的每一列鼠標(biāo)懸浮上去就會(huì)產(chǎn)生一個(gè)浮動(dòng)框顯示其詳細(xì)內(nèi)容?？偨Y(jié)還是那句話，如果一個(gè)塊的包含塊在容器內(nèi)包含容器本身，那么其高度就會(huì)觸發(fā)容器的滾動(dòng)。

前言

今天在項(xiàng)目中有一個(gè)需求，就是一個(gè)可滾動(dòng)的列表的每一列鼠標(biāo)懸浮上去就會(huì)產(chǎn)生一個(gè)浮動(dòng)框顯示其詳細(xì)內(nèi)容。簡(jiǎn)化下情景的代碼如下：


  

  我是列表項(xiàng)
    
我是懸浮框

  




.box {
  height: 200px;
  border: 1px solid red;
  overflow: auto;
}
.item {
  position: relative;
  height: 150px;
  border-bottom: 1px solid blue;
}
.susp {
  position: absolute;
  left: 0;
  top: 150px;
  height: 100px;
  background-color: #eee;
}

預(yù)覽

我本來以為的效果是這樣子的：

實(shí)際卻是這樣的：

我的內(nèi)心是崩潰的，為何絕對(duì)定位可以觸發(fā)容器的滾動(dòng)效果？以前用css太隨意了，根本沒考慮過這些問題。

問題分析

萬幸我在Stack Overflow找到了真有人提問過這個(gè)問題...下面的回答其實(shí)解釋的也不是很明朗，但是看到了核心的概念containing block，也就是包含塊。好吧，讓還沒看懂解釋一臉懵逼的我突然把包含塊說清楚也是有點(diǎn)困難...直接搬運(yùn)W3C中文規(guī)范的定義：

根元素所在的包含塊是一個(gè)被稱為初始包含塊的矩形

對(duì)于其它元素，如果該元素的position是"relative"或者"static"，包含塊由其最近的塊容器祖先盒的內(nèi)容邊界形成

如果元素具有"position: fixed"，包含塊由連續(xù)媒體的視口或者分頁媒體的頁區(qū)建立

如果元素具有"position: absolute"，包含塊由最近的"position"為"absolute"，"relative"或者"fixed"的祖先建立

對(duì)照這個(gè)定義，我們的目前的情景就是符合第四條，我的懸浮框是absolute，列表項(xiàng)relative就是其包含塊，而列表項(xiàng)的包含塊就是容器box。理解到這個(gè)地步應(yīng)該差不多可以推測(cè)出問題所在，懸浮框的包含塊屬于容器以內(nèi)，因此其高度可以觸發(fā)容器的滾動(dòng)。雖然我沒有在官方規(guī)范中找到對(duì)應(yīng)的解釋，但是這個(gè)理解應(yīng)該是沒有問題的，還請(qǐng)有看官大佬指點(diǎn)更好的分析。

解決方法

問題原因找到了，問題也就迎刃而解，既然是因?yàn)閼腋】虻陌瑝K在容器內(nèi)，那么我們就讓懸浮框的包含塊在其外不就可以了么，就將其包含塊默認(rèn)為初始包含塊即可，除非懸浮框的高度超出頁面會(huì)觸發(fā)頁面的滾動(dòng)...但懸浮框的設(shè)計(jì)高度肯定是不可能要超出頁面視口的。修改后的代碼如下：


  

  我是列表項(xiàng)
    
  

  
我是懸浮框




.box {
  height: 200px;
  border: 1px solid red;
  overflow: auto;
}
.item {
  /* position: relative; */
  height: 150px;
  border-bottom: 1px solid blue;
}
.susp {
  position: absolute;
  /* left: 0; */
  /* top: 150px; */
  height: 100px;
  background-color: #eee;
}

其實(shí)就是注釋掉列表項(xiàng)的position: relative，讓懸浮框的包含塊指向初始包含塊，但是此時(shí)注意不能再加定位了，因?yàn)槟銢]法算出來的，因此再注釋掉left和top,同時(shí)要把懸浮框的div放在列表項(xiàng)div的相鄰下面，這樣懸浮框是一個(gè)BFC,也達(dá)到我們想要的位置效果。這個(gè)其實(shí)和BFC關(guān)系不大，但是以前我沒總結(jié)過，給個(gè)參考1和參考2有空好好總結(jié)一下。

總結(jié)

還是那句話，如果一個(gè)塊的包含塊在容器內(nèi)（包含容器本身），那么其高度就會(huì)觸發(fā)容器的滾動(dòng)。

參考

文中Stack Overflow問題

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

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

相關(guān)文章

  • 一些css基礎(chǔ)學(xué)習(xí)筆記

    摘要：當(dāng)父元素設(shè)置了的，子元素為時(shí)，設(shè)置無效當(dāng)父元素設(shè)置了時(shí)，子元素超出父元素部分無效只能限制的層級(jí)相當(dāng)于自身進(jìn)行定位，相對(duì)于邊界會(huì)影響其他元素定位，而無影響自定義拖拽效果同時(shí)存在，無效同理，無效可提高層疊級(jí)數(shù)父元素的較大排前面數(shù)值排在上，當(dāng)前層 relative 1.當(dāng)父元素設(shè)置了relative的zindex，子元素為absolute時(shí)，設(shè)置zindex無效2.當(dāng)父元素relative設(shè)...

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

  • 可視化效果(Visual effects)

    摘要：一般地，一個(gè)塊盒的內(nèi)容都被限制在該盒的邊內(nèi)。這種盒并不一定會(huì)根據(jù)其祖先的屬性裁剪。默認(rèn)情況下，元素不會(huì)被裁剪。在閉合路徑內(nèi)的內(nèi)容會(huì)顯示，而路徑外邊的都會(huì)被剪掉著作權(quán)歸作者所有。 Overflow and clipping 一般地，一個(gè)塊盒的內(nèi)容都被限制在該盒的content邊內(nèi)。某些情況下，一個(gè)盒可能會(huì)溢出，意味著它的部分內(nèi)容或者全部?jī)?nèi)容位于該盒外部，例如： 一行無法拆分，導(dǎo)致行盒比...

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

  • CSS規(guī)范 > 9 視覺格式化模型 Visual Formatting Model

    摘要：盒的類型會(huì)影響其在視覺格式化模型中的表現(xiàn)。浮動(dòng)元素絕對(duì)定位元素根元素都被稱為脫離文檔流其他元素被稱為文檔流內(nèi)。 視覺格式化模型 Visual Formatting Model URL：http://www.w3.org/TR/CSS2/visuren.html Translator: HaoyCn Date: 14th of Aug, 2015 本文并未全部翻譯，譯者在原文基礎(chǔ)上...

    魏憲會(huì) 評(píng)論0 收藏0

  • CSS規(guī)范里的一些事(一)

    摘要：規(guī)范里的一些事前言以下內(nèi)容總結(jié)于規(guī)范，一盒子模型以上圖形說的是盒子模型中的邊界。，，和屬性失效盒的位置是根據(jù)常規(guī)流計(jì)算的被稱為常規(guī)流中的位置，然后盒相對(duì)于其常規(guī)位置偏移。 CSS規(guī)范里的一些事 前言：以下內(nèi)容總結(jié)于CSS2.1規(guī)范，http://www.ayqy.net/doc/css2-1/cover.html 一、盒子模型 showImg(https://segmentfault...

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

  • 《css世界》- 詳細(xì)重點(diǎn)筆記與技巧

    摘要：概述在世界這本書中有一些黑魔法給列舉出來，在結(jié)合自己的理解。篇幅有點(diǎn)長(zhǎng)，希望大家能夠堅(jiān)持看完，一定會(huì)有收獲以下是摘自每章內(nèi)一些重要的概念與技巧。 概述 在《css世界》這本書中有一些黑魔法給列舉出來，在結(jié)合自己的理解。篇幅有點(diǎn)長(zhǎng)，希望大家能夠堅(jiān)持看完，一定會(huì)有收獲?。?！以下是摘自每章內(nèi)一些重要的概念與技巧。其中有解決圖片間隙的問題、小圖標(biāo)與文字居中問題等; ps: 特別是 line-h...

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

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

0條評(píng)論

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