絶対配置された（オーバーフロー：隠された）コンテナの絶対配置された子を親の領域外に表示するにはどうすればいいですか？

この例を考えてみてください（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がクリップされます。どのように私はそれらを包含divsの国境の外側に見えるようにすることができますか？基本的には、ボックスはツールチップのように表示されます（ページの一番上の要素でなければなりません）。好ましい溶液について

基準：

ないマークアップ変更
CSS3
のない使用は、ID wrapperとDIVは絶対位置とoverflow:hidden
クロスブラウザを動作しません

編集：私の要件は厳しいことを知っていますが、私はそれらと協力しなければなりません。私は環境の中でこの仕事を解決しなければなりません。

編集＃2：さて、ここではボックスをマークアップに再配置しないでください。具体的な状況では、他の要素のツールチップ（特にBeautyTips）として使用したいと考えています。 DOMツリー内のツールチップの位置は、ライブラリの内部動作の結果です。私がBeautyTipsを使いたかったとき、私の例で見ることができる問題は、ツールチップ全体の表示を妨げました。それはクリップされました。

出典

2011-02-03 kahoon

私はCSSの専門家はいませんが、確かに 'overflow：hidden'の全体のポイントは、子divが外に出ていないということですか？なぜあなたはそれが機能したくない場合、 'overflow：hidden'を持つ必要がありますか？ –

あなたの要件は不合理ではありませんか？ハンドブレーキがアップしてブレーキを押している間に100Kmで走るように頼むのと同じです – Sotiris

あなたのcritera内でCSS構造やDOM構造のJS修正が受け入れられますか？ – jball