overflow:hidden同样会隐藏position:absolute的子元素

最新推荐文章于 2022-04-19 12:44:26 发布

原创最新推荐文章于 2022-04-19 12:44:26 发布 · 1.5w 阅读

0 ·

CC 4.0 BY-SA版权

CSS 专栏收录该内容

5 篇文章

订阅专栏

本文通过实例演示了当父元素设置overflow:hidden时，如何影响其内部绝对定位的子元素显示，并提供了解决方案。

<!DOCTYPE html>
<html>
<head>
	<title>父元素中有overflow:hidden, 子元素absolute不能显示</title>
	<style>
		.parent{
			height:40px;
			width:200px;
			border:solid 1px black;
			position:relative;
		}
		.sub{
			position:absolute;
			top:10px;
			left:10px;
			height:100px;
			width:100px;
			background-color:red
		}
		
		.overHidden{
			overflow:hidden;	/* 同样会隐藏position:absolute的子元素 */
		}
	</style>
</head>
<body>
这个是有overflow:hidden
	<div class="parent overHidden">
		<div class="sub"></div>
	</div>
	这个没有
	<div class="parent">
		<div class="sub"></div>
	</div>
</body>
</html>

效果如下：