overflow:hidden同样会隐藏position:absolute的子元素
<!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中比较可靠。
声明：该文观点仅代表作者本人，入门客AI创业平台信息发布平台仅提供信息存储空间服务，如有疑问请联系rumenke@qq.com。
- 上一篇： SqlCacheDependency:asp.net SQL缓存依赖
- 下一篇：没有了
