容易被误解的overflow:hidden -pc6资讯

您的位置：首页 → 网页设计 → HTML/CSS → 容易被误解的overflow:hidden

容易被误解的overflow:hidden 时间：2011/4/8 15:01:41来源：小李飞刀作者：裁纸刀下我要评论(0)

为了页面的健壮性，我们常常需要使用overflow:hidden。有时候是为了防止布局被撑开，有时候是为了配合其它规则实现文字截断，还有时候纯粹是为了创建块级上下文。但是，很多人对这个属性是存在着一定的误解的。

网上很多入门的资料或文章都只提到用overflow:hidden加固定的宽度（或高度）可以强制隐藏内部的超出容器的内容。包括之前我们在使用overflow:hidden创建块级上下文的方式来实现图文混排时，都认为overflow:hidden造成了特殊情况下的麻烦。但如果认真阅读一下css规范，会发现overflow:hidden其实并不一定隐藏溢出内容。

overflow:hidden并不隐藏所有溢出的子元素

对于overflow:hidden的最大误解时：当一个具有高度和宽度中至少一项的容器应用了overflow:hidden时，其内部的任何溢出的内容都将被剪裁（隐藏）。但事实确实如此吗？答案是“未必”！事实是拥有overflow:hidden样式的块元素内部的元素溢出并不总是被隐藏，具体来说，需要同时满足以下条件：

拥有overflow:hidden样式的块元素不具有position:relative和position:absolute样式；
内部溢出的元素是通过position:absolute绝对定位；

如果你只关心结论，那么记住这两点就够了。我这里有个demo，结构如下：

<div class="position">    <h2>position box</h2>    <div class="overflow">        <h3>overflow box</h3>        <div class="static">            <p>This is static child element. This is static child element. This is static child element. This is static child element.<p>            <p>This is static child element. This is static child element. This is static child element. This is static child element.<p>        </div>        <div class="absolute">This is absolute child element. This is absolute child element. This is absolute child element. This is absolute child element.</div>    </div></div>

我简单截几个图给懒得打开demo的童鞋看一下：

在demo中，你可以看到绝对定位的元素被定位到了overflow:hidden的父元素之外，但是它依然被显示了。而普通元素在水平方向上的溢出被隐藏，垂直方向上撑开父元素。也就是说，普通元素的表现符合我们的预期，而绝对定位元素并不如很多人想当然的那样被隐藏。

12 下一页

本文导航

第1页: 首页
第2页: 理论依据

相关视频

没有数据

文章评论

第 3 楼 内蒙古兴安盟联通 FF 发表于: 2017/7/25 10:59:31: 绿色背景的元素是相对于body绝对定位，肯不会被隐藏啊，你相对于它的父元素看会不会被隐藏
支持( 5 ) 盖楼(回复)
第 2 楼 陕西宝鸡宝鸡职业技术学院 PC6网友 发表于: 2016/5/31 16:58:33: 看懂了谢谢分享
支持( 2 ) 盖楼(回复)
第 1 楼 四川铁通客人 发表于: 2015/8/27 12:35:25: 没看懂，也没有个代码出来看看
支持( 1 ) 盖楼(回复)

查看所有0条评论>>

热门文章 没有查询到任何记录。