title: Strange z-index behavior with scrollbars under Chrome
body: <p>Using z-index CSS property on 'fixed' positioned elements gives me a strange behavior under Chrome.</p>
  
  <p>When Firefox and Opera browsers give me the awaited result, Chrome does not seem to respect the z-index property, displaying the scrollbar above the red overlay (see code and Fiddle bellow).</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="left"&gt;
      &lt;div class="placeholder"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="right"&gt;&lt;/div&gt;
  &lt;div class="overlay"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>.left {
      background-color: yellow;
      bottom: 0;
      left: 0;
      overflow: auto;
      position: fixed;
      top: 0;
      width: 35%;
      z-index: 10;
  }
  
  .right {
      background-color: orange;
      bottom: 0;
      position: fixed;
      right: 0;
      top: 0;
      width: 65%;
      z-index: 20;
  }
  
  .overlay {
      background-color: red;
      bottom: 20%;
      left: 25%;
      position: fixed;
      right: 25%;
      top: 20%;
      z-index: 40;
  }
  
  .placeholder {
      height: 3000px;
  }
  </code></pre>
  
  <p>Example:  <a href="http://jsfiddle.net/kvNFW/">http://jsfiddle.net/kvNFW/</a></p>
  
  <p>OS:  Apple Mac OS 10.8
  Google Chrome:  Version 27.0.1453.93</p>
  
  <p>Is there someone having experienced the same issues, or having a way to fix that?</p>
  
  <p>Thanks in advance for any help.</p>
  
  <p><strong>Edit:</strong></p>
  
  <p>See this <a href="http://i.stack.imgur.com/V61dh.png">screenshot</a> for an overview of the issue.</p>