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

讨论内容来自: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，那么里面的子对象，即绝对定位对象的定位还是针对浏览器的，并不是针对其父层，那么也就不会出现我问的问题了。
不过我问的重点不是针对浏览器的而是其父层.