title: getComputedStyle returns unexpected z-index
body: <p>When trying to get <code>computed style</code> of a element without position defined I get <code>auto</code>. </p>
  
  <p>The unexpected part for me here is that the parent element has <code>z-index: 100;</code></p>
  
  <p>Should <code>getComputedStyle</code> return <code>100</code> for A1 or is <code>auto</code> the correct value (although <code>z-index</code> for A1's parent is > B)</p>
  
  <h2><a href="http://jsfiddle.net/6DJpY/" rel="nofollow">jsFiddle</a></h2>
  
  <p><strong>CSS</strong></p>
  
  <pre><code>html, body {
      margin: 0;
      padding: 0;
      border: 0;
  }
  #A, #B {
      position: absolute;
  }
  #A {
      top: 35px;
      width: 200px;
      bottom: 35px;
      background-color: #999999;
      z-index:100;
  }
  #A1 {
      height: 50px;
      width: 200px;
      margin-left: 200px;
      background-color: #CC0066;
  }
  #B {
      top: 35px;
      left: 200px;
      right: 0;
      bottom: 35px;
      background-color: #99CC00;
  }
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div id="container"&gt;
      &lt;div id="A"&gt;
          &lt;div id="A1"&gt;I am A1, on top of B.
              &lt;br /&gt;My parent has z-index 100&lt;/div&gt;
      &lt;/div&gt;
      &lt;div id="B"&gt;
          &lt;br /&gt;
          &lt;br /&gt;
          &lt;br /&gt;I am B and have no z-index. I
          &lt;br /&gt;f I had `z-index:200;` A1 would not be visible&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Javascript</strong></p>
  
  <pre><code>var elementA1 =  document.getElementById('A1');
  var a1 = window.getComputedStyle(elementA1).getPropertyValue("z-index");
  console.log(a1); // logs 'auto'
  </code></pre>