title: Avoid an Element from being cut off when they are inside a "overflow: hidden" element
body: <p>I'm using the equal heights CSS trick as outlined on this <a href="http://www.ejeliot.com/blog/61" rel="noreferrer">page</a>.</p>
  
  <p>It was all working fine until today when I need to add a dialogue box inside one of the columns, which is absolutely positioned to take it out of the flow. The problem is that since the container has "overflow: hidden" on it, the dialogue is being cut off when it overflows.</p>
  
  <p>Aside from bringing the dialogue outside of the container element, is there any possible way to get it to show via CSS?</p>
  
  <p>Here's a small example demonstrating what I've mentioned.</p>
  
  <pre><code>&lt;style&gt;
  .container { overflow: hidden; margin-top: 30px }
  .col { 
      float: left;
      padding-bottom: 2000px;
      margin-bottom: -2000px;
      border-right: 1px solid black;
      width: 100px;
      background-color: grey;
  }
  .col.third { border-right: none }
  
  #div-a { position: relative }
  #div-b {
      position: absolute;
      background-color: red;
      width: 35px;
      height: 350px;
      bottom: 0;
      right: 0;
      margin: 5px;
      border: 2px solid black;
  }
  &lt;/style&gt;
  
  &lt;div class="container"&gt;
      &lt;div class="col first"&gt;
          &lt;p style="height: 100px"&gt;One&lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="col second"&gt;
          &lt;p style="height: 300px"&gt;Two&lt;/p&gt;
          &lt;div id="div-a"&gt;
              &lt;!-- this gets cut off by the "overflow: hidden" on div.container --&gt;
              &lt;div id="div-b"&gt;
                  Foo
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col third"&gt;
          &lt;p style="height: 200px"&gt;Three&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>You see that <code>div#div-b</code> is cut off at the top when it overflows in the <code>div.container</code> element.</p>