Why is overflow interacting with z-index?
<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>