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

enali 發(fā)布于2019-08-29 17:14 / 1437人閱讀

摘要：前言今天在項目中有一個需求，就是一個可滾動的列表的每一列鼠標懸浮上去就會產生一個浮動框顯示其詳細內容。總結還是那句話，如果一個塊的包含塊在容器內包含容器本身，那么其高度就會觸發(fā)容器的滾動。

前言

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


  
  我是列表項
    我是懸浮框
  


.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;
}

預覽

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

實際卻是這樣的：

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

問題分析

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

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

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

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

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

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

解決方法

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


  
  我是列表項
    
  
  我是懸浮框


.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;
}

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

總結

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

參考

文中Stack Overflow問題

GPU云服務器云服務器中的絕對定位云主機由多少物理服務器產生相對定位-絕對定位絕對定位

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

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114187.html

一些css基礎學習筆記

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

cgh1999520 2019-08-29 16:12 評論0 收藏0
可視化效果(Visual effects)

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

JowayYoung 2019-08-29 12:37 評論0 收藏0
CSS規(guī)范 > 9 視覺格式化模型 Visual Formatting Model

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

魏憲會 2019-08-28 18:15 評論0 收藏0
CSS規(guī)范里的一些事(一)

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

neu 2019-08-30 13:54 評論0 收藏0
《css世界》- 詳細重點筆記與技巧

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

MasonEast 2019-08-02 12:03 評論0 收藏0