您的位置：首页 > 其它

position:absolute与overflow:hidden，解决子元素设置position:absolute后父元素 overflow:hidden无效的问题

2012-11-14 23:36 746 查看

讨论内容来自:http://bbs.blueidea.com/thread-2925174-1-1.html

绝对定位的对象不是脱离文档流的么，为什么还是会受其父层的overflow:hidden的影响呢?
谁知知晓原理并有完美解决方案?

运行下面的代码，因为父容器没有设置position:relative|absolute|fixed ，所以overflow是不能生效的

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>脱离文档流</title>
</head>
<body>
<div style="width:200px;height:200px;overflow:hidden;border:solid 1px red;">
我没有设置position
<div style="position:absolute;left:100px;top:100px;width:300px;height:300px;border:solid 1px blue;">我是绝对定位!父容器是红色的框框。</div>
</div>
</body>
</html>

一旦设置的话：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>脱离文档流</title>
</head>
<body>
<div style="width:200px;height:200px;overflow:hidden;border:solid 1px red;position:relative;">
一旦设置了position
<div style="position:absolute;left:100px;top:100px;width:300px;height:300px;border:solid 1px blue;">我是绝对定位!父容器是红色的框框。</div>
</div>
</body>
</html>

父层就是设置了position:relative
如果父层没有设置position:relative，那么里面的子对象，即绝对定位对象的定位还是针对浏览器的，并不是针对其父层，那么也就不会出现我问的问题了。
不过我问的重点不是针对浏览器的而是其父层.

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

标签：

相关文章推荐

新的分享

章节导航