title: How can I make div with overflow: hidden overlap floating div?
body: <p>I am working on a site where a 3rd party in-line HTML editor is being used (CKEditor). I have the editor control wrapped in a DIV that is relatively positioned and has a z-index that places is at the top of the visible stack. The problem is that on some pages there are images that are floating (float: right) on the right side. Some of the CKEditor styles are setting elements overflow property to hidden (overflow: hidden). </p>
  
  <p>So although my containing DIV has a larger z-index than the floating image the CKEditor elements are not overflowing on top of the image. This creates the a result that looks as if the top right corner of the editor has been cut out.</p>
  
  <p>Is there a way I can work around this without trying to edit CKEditor styles? Check out this example sinario:</p>
  
  <p><a href="http://jsfiddle.net/nmartin867/StHJA/" rel="nofollow">http://jsfiddle.net/nmartin867/StHJA/</a> </p>
  
  <p>HTML</p>
  
  <pre><code>&lt;body&gt;
  &lt;div class="floating"&gt;
      I'm floating!
  &lt;/div&gt;
  &lt;div class="container"&gt;
      &lt;div class="inner"&gt;
          Why am I not overlapping?
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS:</p>
  
  <pre><code>div{
      border: solid 1px red;
  }
  .container{
      height:300px;
      position: relative;
      overflow: visible;
      z-index: 1;
      background-color:black;
      color: blue;    
  }
  
  .inner{
      background-color:yellow;
      overflow:hidden;
      /*overflow:visible;*/ &lt;--This would work
      text-align: right;
  
  }
  
  .floating{
      color:black;
      width:100px;
      height:100px;
      background-color:green;
      float:right;
  }
  </code></pre>