Google chrome not obeying z-index when inside a fixed element.

Question

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.

See my layout on the jsfiddle: http://jsfiddle.net/KV5nw/1/

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.

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.

#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;
}

I am on google chrome version: Version 32.0.1700.107

Any advice?

Solution

The problem is that Chrome creates a new stacking context for elements that don't have a z-index set (default is auto). So your sidebar has a z-index of 0 which makes it (and all of its childrens) disappear since you've specified a higher z-index for your #top container.

To solve the problem, give the sidebar a z-index higher than the one from #top:

#sidebar{
    width:inherit;
    position: fixed;
    display: block;
    z-index: 501;
}

DEMO

Comments

[k.ueckermann]

I would like that the Red username block goes under the grey block and the avatar goes over. I dont know if this is possible?

[k.ueckermann]

Thanks very much. This helped me understand the situation. However I realize I would want that only the avatar is above the grey block and the red username block is under the grey block. jsfiddle.net/KV5nw/4 In this js fiddle you can see the red block goes over the grey block. Is what I want to achieve possible like this?

[damian]

@k.ueckermann Unfortunately that's not possible with CSS. But you could change the position of #user_avatar inside the html structure with JavaScript.

[k.ueckermann]

Ok, thanks very much for the help! I think I found a way to restructure the interface now that will solve my issue.