由一个绝对定位引发overflow：auto滚动问题产生的关于包含块（containing bloc

enali 发布于2019-08-29 17:14 / 1347人阅读

摘要：前言今天在项目中有一个需求，就是一个可滚动的列表的每一列鼠标悬浮上去就会产生一个浮动框显示其详细内容。总结还是那句话，如果一个块的包含块在容器内包含容器本身，那么其高度就会触发容器的滚动。

前言

今天在项目中有一个需求，就是一个可滚动的列表的每一列鼠标悬浮上去就会产生一个浮动框显示其详细内容。简化下情景的代码如下：


  
  我是列表项
    我是悬浮框
  


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

预览

我本来以为的效果是这样子的：

实际却是这样的：

我的内心是崩溃的，为何绝对定位可以触发容器的滚动效果？以前用css太随意了，根本没考虑过这些问题。

问题分析

万幸我在Stack Overflow找到了真有人提问过这个问题...下面的回答其实解释的也不是很明朗，但是看到了核心的概念containing block，也就是包含块。好吧，让还没看懂解释一脸懵逼的我突然把包含块说清楚也是有点困难...直接搬运W3C中文规范的定义：

根元素所在的包含块是一个被称为初始包含块的矩形

对于其它元素，如果该元素的position是"relative"或者"static"，包含块由其最近的块容器祖先盒的内容边界形成

如果元素具有"position: fixed"，包含块由连续媒体的视口或者分页媒体的页区建立

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

对照这个定义，我们的目前的情景就是符合第四条，我的悬浮框是absolute，列表项relative就是其包含块，而列表项的包含块就是容器box。理解到这个地步应该差不多可以推测出问题所在，悬浮框的包含块属于容器以内，因此其高度可以触发容器的滚动。虽然我没有在官方规范中找到对应的解释，但是这个理解应该是没有问题的，还请有看官大佬指点更好的分析。

解决方法

问题原因找到了，问题也就迎刃而解，既然是因为悬浮框的包含块在容器内，那么我们就让悬浮框的包含块在其外不就可以了么，就将其包含块默认为初始包含块即可，除非悬浮框的高度超出页面会触发页面的滚动...但悬浮框的设计高度肯定是不可能要超出页面视口的。修改后的代码如下：


  
  我是列表项
    
  
  我是悬浮框


.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有空好好总结一下。

总结

还是那句话，如果一个块的包含块在容器内（包含容器本身），那么其高度就会触发容器的滚动。

参考

文中Stack Overflow问题

云服务器 GPU云服务器中的绝对定位云主机由多少物理服务器产生相对定位-绝对定位绝对定位

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114187.html

一些css基础学习笔记

摘要：当父元素设置了的，子元素为时，设置无效当父元素设置了时，子元素超出父元素部分无效只能限制的层级相当于自身进行定位，相对于边界会影响其他元素定位，而无影响自定义拖拽效果同时存在，无效同理，无效可提高层叠级数父元素的较大排前面数值排在上，当前层 relative 1.当父元素设置了relative的zindex，子元素为absolute时，设置zindex无效2.当父元素relative设...

cgh1999520 2019-08-29 16:12 评论0 收藏0
可视化效果(Visual effects)

摘要：一般地，一个块盒的内容都被限制在该盒的边内。这种盒并不一定会根据其祖先的属性裁剪。默认情况下，元素不会被裁剪。在闭合路径内的内容会显示，而路径外边的都会被剪掉著作权归作者所有。 Overflow and clipping 一般地，一个块盒的内容都被限制在该盒的content边内。某些情况下，一个盒可能会溢出，意味着它的部分内容或者全部内容位于该盒外部，例如：一行无法拆分，导致行盒比...

JowayYoung 2019-08-29 12:37 评论0 收藏0
CSS规范 > 9 视觉格式化模型 Visual Formatting Model

摘要：盒的类型会影响其在视觉格式化模型中的表现。浮动元素绝对定位元素根元素都被称为脱离文档流其他元素被称为文档流内。视觉格式化模型 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规范里的一些事(一)

摘要：规范里的一些事前言以下内容总结于规范，一盒子模型以上图形说的是盒子模型中的边界。，，和属性失效盒的位置是根据常规流计算的被称为常规流中的位置，然后盒相对于其常规位置偏移。 CSS规范里的一些事前言：以下内容总结于CSS2.1规范，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