title: How to make an absolutely positioned (overflow:hidden) container's absolutely positioned children show outside of their parent's area?
body: <p>Please consider this example: (<a href="http://jsfiddle.net/yZdBD/3/" rel="nofollow">working example</a>)</p>
  
  <p>Style declarations:</p>
  
  <pre><code>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;}
  </code></pre>
  
  <p>Markup:</p>
  
  <pre><code>&lt;body&gt;
  &lt;h1&gt;overflow:hidden and absolutely positioned elements&lt;/h1&gt;
  &lt;div id="wrapper"&gt;
  &lt;div class="markup"&gt;
  
        &lt;div class="box1"&gt;box 1&lt;/div&gt;
          &lt;div class="box2"&gt;box 2&lt;/div&gt;
          &lt;div class="box3"&gt;box 3&lt;/div&gt;
          &lt;div class="box4"&gt;box 4&lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>As you can see, <code>Box1</code> and <code>Box4</code> are clipped. How can I make them visible outside the containing divs' borders? Basically the boxes should be displayed like tooltips (they must be the topmost elements on the page).</p>
  
  <p>Criteria regarding the preferred solution:</p>
  
  <ul>
  <li>no markup modifications</li>
  <li>no use of CSS3</li>
  <li>works cross browser</li>
  <li>the div with id <code>wrapper</code> must remain
  absolutely positioned and must remain <code>overflow:hidden</code></li>
  </ul>
  
  <p><strong>Edit:</strong> I know that my requirements are tough, but I have to work with them. I have to solve this task in an enviroment I have no absolute control over.</p>
  
  <p><strong>Edit #2:</strong> Okay, here is WHY I need the boxes to not be relocated in the markup. In the concrete situation I want to use them as tooltips (specifically BeautyTips) for other elements. The position of the tooltip in the DOM tree is the result of the internal workings of the library. When I wanted to use BeautyTips, the problem that can be seen in my example prevented the display of the whole tooltip: it was clipped.</p>