讨论内容来自:http://bbs.blueidea.com/thread-2925174-1-1.html
绝对定位的对象不是脱离文档流的么，为什么还是会受其父层的overflow:hidden的影响呢?
谁知知晓原理并有完美解决方案?
运行下面的代码，因为父容器没有设置position:relative|absolute|fixed ，所以overflow是不能生效的
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>脱离文档流</title> 6 </head> 7 <body> 8 <div style="200px;height:200px;overflow:hidden;border:solid 1px red;"> 9 我没有设置position 10 <div style="position:absolute;left:100px;top:100px;300px;height:300px;border:solid 1px blue;">我是绝对定位!父容器是红色的框框。</div> 11 </div> 12 </body> 13 </html>
一旦设置的话：
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <title>脱离文档流</title> 6 </head> 7 <body> 8 <div style="200px;height:200px;overflow:hidden;border:solid 1px red;position:relative;"> 9 一旦设置了position 10 <div style="position:absolute;left:100px;top:100px;300px;height:300px;border:solid 1px blue;">我是绝对定位!父容器是红色的框框。</div> 11 </div> 12 </body> 13 </html>
父层就是设置了position:relative
如果父层没有设置position:relative，那么里面的子对象，即绝对定位对象的定位还是针对浏览器的，并不是针对其父层，那么也就不会出现我问的问题了。
不过我问的重点不是针对浏览器的而是其父层.