CODEWITHSUNDEEP
htmlcssgoogle-chromez-index
k.ueckermann
k.ueckermann

Reputation: 73

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

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?

Upvotes: 4

Views: 18796

Answers (4)

Alberto
Alberto

Reputation: 1

Set the z-index for the fixed element too. I mean:

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

}

Upvotes: 0

fillon
fillon

Reputation: 1

I solve a similar probleme by changing the position on sideBar from fixed to absolute

Upvotes: -1

damian
damian

Reputation: 5444

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

Upvotes: 5

Anon
Anon

Reputation: 2874

#user_avatar and #top must be place at one level on DOM for normal z-index. Now parent of #user_avatar (#sidebar) has z-index:0 and z-index of #user_avatar working only inside #sidebar. Add to parent of #user_avatar (#sidebar) z-index:501 or replace #user_avatar

Upvotes: 0

Related Questions