title: Google chrome not obeying z-index when inside a fixed element.
body: <p>I am setting up an interface for a social network, however, I am having an issue with z-index in google chrome. It seems to work as expected in safari, firefox and internet explorer.</p>
  
  <p>See my layout on the jsfiddle: <a href="http://jsfiddle.net/KV5nw/1/" rel="nofollow">http://jsfiddle.net/KV5nw/1/</a> </p>
  
  <p>The side bar should be fixed to the left of screen and the grey avatar should be above the dark grey block at the top. </p>
  
  <p>If #sidebar has position fixed applied then #user_avatar's z-index is ignored.
  If you set #sidebar's position to relative or absolute then #user_avatar's z-index is fine.</p>
  
  <pre><code>#sidebar{
    width:inherit;
    position: fixed;
    display: block;
  }
  #user_avatar{
    margin:0 auto;
    width:120px;
    height: 120px;
    border:4px solid white;
    background-color: #555;
    display: block;
    margin-top:-100px;
    position: relative;
    z-index:501;
  }
  </code></pre>
  
  <p>I am on google chrome version: Version 32.0.1700.107</p>
  
  <p>Any advice?</p>