title: Children of z-index: 'auto' vs z-index: 0, and what is "stacking context" in CSS?
body: <p>Previously, I believed that a child element could not be z-indexed over an element that is a sibling of its parent element that has a higher z-index than its parent. For example, divs A and B are siblings. <code>Div A</code> has a z-index of 10, and <code>div B</code> has a z-index of 5. <code>Div B</code> has a child element: <code>Div C</code>, with a z-index of 9999. From my understanding, <code>div C</code> will <em>not</em> be positioned above <code>div A</code>, because <code>div C</code>'s parent (<code>div B</code>) has a lower z-index than <code>div A</code>. This holds true, unless <code>div B</code> has a z-index of 'auto'. When <code>div B</code> has a z-index of 'auto', which would be '0', as it is inheriting from body, <code>div C</code> positions over <code>div A</code>, even though div B's z-index is actually <strong>LOWER</strong> than it was when it wasn't working.</p>
  
  <p>From the CSS2 spec, z-index 'auto' is defined as </p>
  
  <p><em>The stack level of the generated box in the current stacking context is 0. The box does not establish a new stacking context unless it is the root element.</em></p>
  
  <p>I'm having trouble understanding "<em>stacking context.</em>" It seems to be the only difference between a defined z-index of 0, and a default of 'auto' which is 0 but also has no stacking context. More specifically:</p>
  
  <p><strong>Why are children of elements with no stacking content z-indexed differently than those within a stacking context?</strong></p>
  
  <p>Here is a fiddle that shows the difference between z-index of 0, and a z-index of auto. The green div is a child of the blue div, and the red div is a sibling of the blue div.</p>
  
  <p><a href="http://jsfiddle.net/c7Tvt/">http://jsfiddle.net/c7Tvt/</a></p>