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

最新推荐文章于 2023-11-02 16:25:02 发布

边城的刀声

最新推荐文章于 2023-11-02 16:25:02 发布

阅读量1.5w

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/bclz_vs/article/details/13002301

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!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中比较可靠。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

边城的刀声

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
overflow:hidden同样会隐藏position:absolute的子元素

父元素中有overflow:hidden, 子元素absolute不能显示 .parent{ height:40px; width:200px; border:solid 1px black; position:relative; } .sub{ position:absolute; top:10px; left:10px; heig
复制链接

扫一扫