您的位置：首页 > 其它

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

2013-10-24 17:40 176 查看

<!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>

效果如下：

这种情况通常会出现在我们在做一些具有弹出或下拉的控件时，所以还是把弹出层直接放到body中比较可靠。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航