overflow:hidden
<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;
}
