overflow:hidden_html/css_WEB-ITnose
对于overflow:hidden的最大误解时:当一个具有高度和宽度中至少一项的容器应用了overflow:hidden时,其内部的任何溢出的内容都将被剪裁(隐藏)。
同时满足以下条件就无效:
- 拥有overflow:hidden样式的块元素不具有position:relative绝对 和position:absolute相对
- 内部溢出的元素是通过position:absolute绝对 进行定位的
这里引用网上对overflow的css2.1规范的解释:
原文
This property specifies whether content of a block container element is clipped when it overflows the element’s box. It affects the clipping of all of the element’s content except any descendant elements (and their respective content and descendants) whose containing block is the viewport or an ancestor of the element.
翻译
此属性(overflow)规定,当一个块元素容器的内容溢出元素的盒模型边界时是否对其进行剪裁。它(此属性)影响被应用元素的所有内容的剪裁。但如果后代元素的包含块是整个视区(通常指浏览器内容可视区域,可以理解为body元素)或者是该容器(定义了overflow的元素)的父级元素时,则不受影响。
对于“包含块”大家都很熟悉:
一个绝对定位的元素,其包含块是最近的拥有relative或者absolute定位属性的祖先元素,如果任何一级祖先元素都不符合,则其包含块是body元素。
这就说明,一个绝对定位的元素是否被overflow:hidden隐藏,要看其包含块相对于overflow:hidden的位置来决定。
在css2.1规范的11.1节,还有更明确的说明:
原文
A descendant box is positioned absolutely, partly outside the box. Such boxes are not always clipped by the overflow property on their ancestors; specifically, they are not clipped by the overflow of any ancestor between themselves and their containing block。
翻译
一个绝对定位的后代块元素,部分位于容器之外。这样的元素是否剪裁并不总是取决于定义了overflow属性的祖先容器;尤其是不会被位于他们自身和他们的包含块之间的祖先容器的overflow属性剪裁。
所以overflow:hidden并不是万能的,要想彻底剪裁它的所有子元素,它不但要有overflow:hidden,而且还要作为所有子元素的包含块。
上一篇: django入门记录 2,django入门记录_PHP教程
下一篇: php设置方法
推荐阅读
-
Stack Overflow上59万浏览量的提问:为什么会发生ArrayIndexOutOfBoundsException?
-
css设置Overflow实现隐藏滚动条的同时又可以滚动
-
修正IE下使用CSS属性overflow的bug
-
android怎么实现始终显示overflow菜单?
-
android实现始终显示overflow菜单的方法
-
python 之 前端开发(盒子模型、页面布局、浮动、定位、z-index、overflow溢出)
-
优化NFR之一 --MSSQL Hello Buffer Overflow
-
为什么设置overflow为hidden可以清除浮动带来的影响
-
css之使table也能overflow:hidden
-
细说CSS3中box属性中的overflow-x属性和overflow-y属性值的效果