问题产生原因:
例如:
<!DOCTYPE html>
<html lang="zh">
<head>
<Meta charset="UTF-8">
<title>Document</title>
<style>
* {margin: 0; padding: 0;}
.father {width: 200px; height: 200px; background: red; overflow: hidden;}
.child {width: 300px; height: 300px; background: blue; position: absolute;}
</style>
</head>
<body>
<div class="father">
<div class="child"></div>
</div>
</body>
</html>
由于我的系统是win7,没有装IE6、7,不过IE有一个开发者工具,按F12。
这样我们刷新浏览器看看。
父元素的over:hidden;并没有启作用。
<!DOCTYPE html>
<html lang="zh">
<head>
<Meta charset="UTF-8">
<title>Document</title>
<style>
* {margin: 0; padding: 0;}
.father {width: 200px; height: 200px; background: red; overflow: hidden; position: relative;}
.child {width: 300px; height: 300px; background: blue; position: absolute;}
</style>
</head>
<body>
<div class="father">
<div class="child"></div>
</div>
</body>
</html>
这样父元素的overflow就启作用了。