版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xutongbao/article/details/83651938
- 拥有overflow:hidden样式的块元素不具有position:relative和position:absolute样式；
- 内部溢出的元素是通过position:absolute绝对定位，并且该定位元素的包含块是设置overflow:hidden元素的父级元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,height=device-height">
<title>overflow:hidden / scroll不会隐藏所有子元素</title>
<style>
html,
body {
margin: 0;
}
.over-hidden{overflow:scroll; height:100px; font-size:14px; width:100px; border:2px dotted #ddd;}
.outer{position:relative}
.inner1{position:absolute; top:0;height: 200px; background:yellow;}
.inner2{position:absolute; top:200px; background:pink;}
</style>
</head>
<body>
<div class='over-hidden'>
<div class='outer'>
<div class='inner1'>这是第一个盒子。这是第一个盒子</div>
</div>
<div class='inner2'>这是第二个盒子。这是第二个盒子</div>
</div>
</body>
</html>