title: CSS overflow: hidden ignored
body: <p>I am struggling to understand, why overflow: hidden is overridden by descendent element. Please check the this example I have created <a href="http://jsfiddle.net/2fRxc/" rel="nofollow">http://jsfiddle.net/2fRxc/</a>. </p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="relative"&gt;
      &lt;div class="overflow"&gt;box with "overflow:hidden;" (HOVER ME)
          &lt;div class="absolute"&gt;absolute box which ignore "overflow:hidden;" rule of parent box&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Style.css</strong></p>
  
  <pre><code>html, body {
      height:100%;
  }
  .relative {
      position:relative;
      padding:20px;
      width:50%;
      height:50%;
      background:blue;
  }
  .overflow {
      width:100%;
      height:100%;
      background:#ff0;
      overflow:hidden;
      float:left;
  }
  .overflow:hover .absolute {
      opacity:1
  }
  .absolute {
      width:100%;
      height:100%;
      background:#f00;
      position:absolute;
      top:0;
      left:0;
      opacity:0
  }
  </code></pre>
  
  <p>I know if you apply position relative to the <strong>overflow</strong> container. that will fix it, but I do not want it. I want the the absolute container to be position to relative container. </p>
  
  <p>Any suggestion will be really appreciated.</p>