overflow:hidden

最新推荐文章于 2024-07-20 16:23:06 发布

ddmmmi2951

最新推荐文章于 2024-07-20 16:23:06 发布

阅读量106

点赞数

原文链接：http://www.cnblogs.com/zhangpu8/p/4664951.html

版权

<p>一个绝对定位的元素是否被overflow:hidden隐藏，要看其包含块相对于overflow:hidden的位置来决定</p>
<p>也就是说爷爷(dd)相对定位，老爸(dd1)规定溢出隐藏，可是儿子(dd2)是绝对定位元素。这时候儿子是否隐藏由爷爷决定，而不是老爸</p>

<title>overflow:hidden;</title>
<style type="text/css">
body{
margin:o auto;
text-align:center;
}
#dd{
width:400px;
height:400px;
background:red;
position:relative;
}
#dd1{
width:200px;
background:gray;
height:100px;
overflow:hidden;
}
#dd2{
width:200px;
height:100px;
background:green;
position:absolute;
top:30px;
left:-120px;

}
</style>
</head>

<body>
<div id="dd">
    <div id="dd1">
        <div id="dd2"></div>
    </div>
</div>
</body>
</html>
最终效果图：

所以结论：
拥有overflow:hidden样式的块元素内部的元素溢出并不总是被隐藏，需要同时满足以下条件：

拥有overflow:hidden样式的块元素（就是指上文中的爸爸）不具有position:relative和position:absolute样式；
内部溢出的元素（就是指上文中的儿子）是通过position:absolute绝对定位；

如果我们降相对定位移到爸爸里，那么儿子溢出隐藏将会成功
CSS代码如下：
#dd{
width:400px;
height:400px;
background:red;
}
#dd1{
width:200px;
background:gray;
height:100px;
position:relative;
overflow:hidden;
}
#dd2{
width:200px;
height:100px;
background:green;
position:absolute;
top:30px;
left:-120px;
}