成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

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

enali / 1620人閱讀

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

前言

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


  

  我是列表項
    
我是懸浮框

  




.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)心是崩潰的，為何絕對定位可以觸發(fā)容器的滾動效果？以前用css太隨意了，根本沒考慮過這些問題。

問題分析

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

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

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

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

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

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

解決方法

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


  

  我是列表項
    
  

  
我是懸浮框




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

總結(jié)

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

參考

文中Stack Overflow問題

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/114187.html

相關(guān)文章

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

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

    cgh1999520 評論0 收藏0

  • 可視化效果(Visual effects)

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

    JowayYoung 評論0 收藏0

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

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

    魏憲會 評論0 收藏0

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

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

    neu 評論0 收藏0

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

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

    MasonEast 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<