如何使绝对定位的（溢出：隐藏）容器的绝对定位的孩子显示在父母的区域之外？

请考虑下面这个例子：（working example）如何使绝对定位的（溢出：隐藏）容器的绝对定位的孩子显示在父母的区域之外？

的样式声明：

body {background:#333;font:1em Arial, Helvetica, sans-serif;} 
h1 {color:#ececec;text-align:center;margin:1.5em 0 1em;} 
h2 {font-weight:normal;font-size:1.15em; 
    padding-bottom:5px;border-bottom:1px solid #999;} 
p {padding-right:1em;color:#000;} 
pre {font-size:1em;color:#06f;margin:1em 0;} 

#wrapper {position:absolute;width:100px;height:100px;background:#ececec; 
      overflow:hidden;zoom:1;padding:20px;border-bottom:1px solid #000; 
      border-right:1px solid #000;border-top:1px solid #fff; 
      border-left:1px solid #fff;} 
.css {float:right;width:50%;} 
.markup {float:left;width:50%;margin-right:-1px;} 
.box1, 
.box2, 
.box3, 
.box4 {background:#fff;position:absolute;padding:10px;border:1px solid #333;} 
.box1 {left:0;top:-20px;} 
.box2 {right:0;top:0;} 
.box3 {left:0;bottom:0;} 
.box4 {right:-20px;bottom:-20px;}

标记：

<body> 
<h1>overflow:hidden and absolutely positioned elements</h1> 
<div id="wrapper"> 
<div class="markup"> 

     <div class="box1">box 1</div> 
     <div class="box2">box 2</div> 
     <div class="box3">box 3</div> 
     <div class="box4">box 4</div> 
</div> 
</body>

正如你所看到的，Box1和Box4被裁剪。我如何让它们在包含div的边界之外可见？基本上这些框应该像工具提示一样显示（它们必须是页面上最顶层的元素）。关于首选的解决方案

标准：