Why doesn't the browser respect the z-index of an element with a "position: fixed" parent?

Question

So I have this fiddle:

https://jsfiddle.net/ionescho/t0qo6z5u/ . With html :

<div id="overlay">
</div>

<div id="top_menu">
    <span>
        fasdfsfafasdfas
    </span>
</div>

and css:

#overlay{
    position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1100;
  background-color: #000;
  opacity: 0.8;
}
#top_menu{
    position:fixed;
    top:0;
    left:0;
    right:0;
    height:200px;
    background-color:red;
    padding-top:40px;
    padding-left:40px;
}
#top_menu > span{
    font-weight:bold;
    color:white;
    font-size:30px;
    z-index:1101;
    position:relative;
}

As you can see, the white text is still behind the semi-transparent overlay. If I modify the span's parent (#top_menu) from "position:fixed" to "position:relative", I get the z-index behavior I was looking for.

However, I cannot lose that "position:fixed" property. Does anyone know why this happens and how can I make a work-around?

Thanks.

Z-index works just on the same DOM level, not with parents and children.. — Sebsemillia, Jul 13 '15 at 14:07
Am I correct in thinking you want the overlay between the red div and its child span? Also, is the structure you have strict, because there are other ways of achieving this. — thecraighammond, Jul 13 '15 at 14:10
if you are using position fixed, why not just move the overlay to be the same level as the child and then it should work: https://jsfiddle.net/t0qo6z5u/2/ — Pete, Jul 13 '15 at 14:14
I want it like this : https://jsfiddle.net/ionescho/atan1b2d/ . But I need the #top_menu item to be "position:fixed" . — ionescho, Jul 13 '15 at 14:14
@Pete, exactly that, this is why I was checking to see whether the structure was strict as there are easier ways around the problem. — thecraighammond, Jul 13 '15 at 14:15

score 1 · Accepted Answer · edited May 23 '17 at 12:29

Your desired behavior is currently the standard one, and works on Firefox.

However, according to this answer,

this behavior is slated to be changed for elements with position: fixed such that they will always establish stacking contexts regardless of their z-index value. Some browsers have begun to adopt this behavior, however the change has not been reflected in either CSS2.1 or the new CSS Positioned Layout Module yet, so it may not be wise to rely on this behavior for now.

Then if #top_menu establishes a stacking context, the z-index of #top_menu > span will set its z-position inside that stacking context. However, #top_menu is below #overlay.

To solve the problem you can set a z-index to #top_menu (and thus generate a stacking context on all browsers) with a value higher than #overlay's one. However, then #top_menu's background will be in front of #overlay.

#top_menu {
  z-index: 1101;
}

#overlay {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1100;
  background-color: #000;
  opacity: 0.8;
}
#top_menu {
  position: fixed;
  z-index: 1101;
  top: 0;
  left: 0;
  right: 0;
  height: 200px;
  background-color: red;
  padding-top: 40px;
  padding-left: 40px;
}
#top_menu > span {
  font-weight: bold;
  color: white;
  font-size: 30px;
  z-index: 1101;
  position: relative;
}

<div id="overlay"></div>
<div id="top_menu">
  <span>fasdfsfafasdfas</span>
</div>

I want to have the #top_menu background behind the overlay and only the text in front of it. See this example: http://jsfiddle.net/ionescho/atan1b2d/ . Only problem is that the #top_menu element needs to remain "position:fixed" — ionescho, Jul 13 '15 at 14:21
@ionescho Yes. But some browsers (and probably the spec in the future) won't allow this. — Oriol, Jul 13 '15 at 14:22

score 0 · Answer 2 · answered Jul 13 '15 at 14:10

0

I am not sure what you want to achieve. The span - as a child of #top_menu is inheriting the z-index from its parent. Do you want the Menu to be on top of the overlay? In that case #top_menu needs the z-index property. If you want just the span to be on top, you would have to move it out of the parent container and give the text itself a position fixed.

answered Jul 13 '15 at 14:10

Julia Will

616
3
8

I want it like this : jsfiddle.net/ionescho/atan1b2d . But I need the #top_menu item to be "position:fixed" – ionescho Jul 13 '15 at 14:15
That's not going to work like this. All site elements are in different layers, so fixed or absolute are in their own layers on top of static elements. As long as the span is within the #top_menu and both are position fixed, they are technically one element (like a box in a box). To have the span above the rest, you will have to move it outside of the topmenu. – Julia Will Jul 13 '15 at 14:51

Why doesn't the browser respect the z-index of an element with a "position: fixed" parent?

2 Answers2