title: Why is overflow interacting with z-index?
body: <p>I am trying to understand the rules behind z-index and how it interacts with the overflow property.</p>
  
  <p>I have this html: </p>
  
  <pre><code>&lt;body&gt;
    &lt;div class="cell"&gt;
      Here is some text to keep things interesting
      &lt;div class="boxy"&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>And this css: </p>
  
  <pre><code>.boxy {
    position: absolute;
    z-index: 9999;
    top:70px;
    width: 50px;
    height: 50px;
    background: #0FF;
  }
  
  .cell {
    border: 2px solid #F00;
    position: relative;
  
    /* comment these two lines out and the box appears */
    /* or change them both to 'visible' */
    /* changing only one of them to 'visible' does not work */
    overflow-y: auto;
    overflow-x: auto;
  }
  </code></pre>
  
  <p>I would have expected that the cyan box appears even though it is out of the size of the <code>div.cell</code> because its z-index and its position are set.</p>
  
  <p>However, the only way to make the cyan box appear is to comment out the overflow-x and -y lines. </p>
  
  <p>My question is: How can I make the cyan box appear on the screen while keeping the overflow as either hidden or auto?  But more importantly, I'm looking to understand <em>why</em> this is happening. What are the css and layout rules being applied here?</p>
  
  <p><a href="http://plnkr.co/edit/lR8jpeyiYmkRusyRLkVp?p=preview" rel="noreferrer">See my Plunkr.</a> This example, is of course a much simplified version of the HTML/CSS I am actually working with.</p>
  
  <hr>
  
  <p><strong>EDIT</strong> 
  There seems to be some confusion in the answers below because I didn't explain things well enough. If you comment the two overflow lines out, you can see that the cyan box appears. It appears outside of the border of <code>.cell</code>.  Why does this happen? How can I make the cyan box appear, while still hiding overflow and z-index? </p>