z-index not working, not sure why

Question

I have an overlay I created that has the following styling:

#overlay-2 {
height: 100%;
width: 100%;
position: fixed;
left: 0;
top: 0;
background: none repeat scroll 0 0 #000000;
opacity: 0.85;  
z-index: 10;
}`

I am trying to allow my header to still show above the overlay. (I am using the overlay for when drop down menus are open the site will darken (with the overlay) but the header and menu will still be normal).

This is just one of my header id's:

    #header_main {
    z-index: 11;
    position: relative; 
    }

and another:

#megaMenu {
position: relative;
z-index: 500;
}

But nothing changes! I have even changed the position to fixed like the overlay, but still no change. What could be causing this? Also, I've heard mixed info on whether or not z-index is still relevant among differing position types. Ex. fixed vs relative would mean nothing. Their z-indexes don't matter to eachother. While others say the exact opposite "It doesn't matter what position type as long as it isn't static"

------------------------UPDATED:----------------------------------- Here is the html (from firebug) wordpress site.

<head>
<body id="top" class="home page page-id-1412 page-template-default logged-in stretched open_sans open_sans siteorigin-panels" itemtype="http://schema.org/WebPage" itemscope="itemscope">
    <div id="wrap_all">
        <header id="header" class="header_color light_bg_color mobile_drop_down" itemtype="http://schema.org/WPHeader" itemscope="itemscope" role="banner">
            <div id="header_meta" class="container_wrap container_wrap_meta">
            <div id="header_main" class="container_wrap container_wrap_logo">
            <div id="header_main_alternate" class="container_wrap">
            <div class="header_bg"></div>
        </header>
        <div id="main">
      </div>
    <div class="main_color avia-builder-el-9 el_after_av_slideshow_full masonry-not-first container_wrap fullsize">
    <div id="after_masonry" class="main_color container_wrap fullsize">
    <div id="av_section_3" class="avia-section main_color avia-section-default avia-no-shadow avia-builder-el-11 el_after_av_one_full container_wrap fullsize">
    <div id="after_section_3" class="main_color container_wrap fullsize">
    <div id="footer" class="container_wrap footer_color">
    <footer id="socket" class="container_wrap socket_color" itemtype="http://schema.org/WPFooter" itemscope="itemscope" role="contentinfo">
    <div id="login-box" class="login-popup">

//scripts etc..

    <div id="fb-root"></div>
    <div id="overlay-2" style="display: block;"></div>
</body>

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index, http://philipwalton.com/articles/what-no-one-told-you-about-z-index/ — CBroe, Jan 27 '14 at 04:20

jfriend00 · Accepted Answer · 2014-01-27T05:36:22.167

Edit now that you've shown your HTML:

You want to show #header (position: relative) above #overlay-2 (position: fixed). The problem is that #header is in a stacking context defined by it's parent #wrap_all so none of the #wrap_all children will ever be above or below that stacking context. If #wrap_all is not positioned itself, then it (and it's children) will be below #overlay-2 which is probably what you're seeing.

There are several possible solutions.

If you take #header out of its parent and put it at the same level as #overlay-2 (same parent), then it will be in the same stacking context and you can use z-index to position those two items relative to one another. If you give #header a higher z-index, it will be on top of #overlay-2.

If you want everything in #wrap_all to be above #overlay-2, then you could make#wrap_allbe positioned and give it az-indexwithout changing your structure. But, if you only want#headerto be above, then you will have to pull it out of#wrap_all`.

Here's some of the explanation for what's going on.

z-index is somewhat complicated.

First off, the z-index only has any effect on "positioned" elements (e.g. an element that has a CSS position set to something other than auto.

Second off, the z-index only moves an element forward or backwards within its stacking context. The stacking context is determined by one of it's parents. For many items, the stacking context is their parent. This is where many people get confused. They think that two items (no matter where they are in the DOM) should be positioned in the stacking order purely based on their z-index value, but that is only the case if they are in the same stacking context (they have the same controlling parent). If they are not in the same stacking context, then the stacking context determines which is above the other and the z-index only affects how items are layered within their own stacking context.

Thirdly, position: fixed is put into a root level stacking context by some browsers, but not by some other browsers so if your #overlay-2 isn't a top level object, you may get some variability by browser.

See this article for much more detail on z-index.

And, this article describes how a stacking context is defined and what creates a new one.

So, to fully answer your question we'd need to see the HTML structure to see how #header_main and #megaMenu are related to one another in the HTML and the CSS of any parents of those items so we can understand which stacking context they are in.

1+ Nice explanation; I have a feeling `#overlay-2` is a parent of `#header_main`. It's probably the stacking context as you stated. — Josh Crozier, Jan 27 '14 at 05:01
Thanks for that info! I didn't know they had to be in the same stacking context/ share same parents. I think this is the issue here. Both elements are in the body section of the html. The overlay is in it's own main div (1st level div in regards to body). The header ad menu stuff is in a separate main div (again in regards to the body). So I'm thinking if I add the overlay to the same div as the items I want showing above the overlay, all should be well? — user3187895, Jan 27 '14 at 05:13
@user3187895 - certainly if you put two elements with position: relative in the same parent, then they will be in the same stacking context so z-index will control which is above the other. It doesn't have to be that direct for you to achieve control, but that is the simplest way so if that's easy to do, then that will solve your problem. If you edit your question to show your the existing HTML hierarchy for these elements with any relevant CSS for the elements and their parents, then we could answer much more specifically (all that info is needed to understand the stacking contexts). — jfriend00, Jan 27 '14 at 05:22
@jfriend00 - Thanks for all your help! I updated my original post with the html. #overlay-2 is at the bottom and a "main" div of the body. #Header_main is near the top and I'm not even sure what to call it. I inserted the #overlay-2 using JS. If simply moving it to the correct location in the hierarchy, than that's what I'll do (hopefully). — user3187895, Jan 27 '14 at 05:31
@user3187895 - Now that you've shown your HTML, I've added a couple sections to the beginning of my answer. — jfriend00, Jan 27 '14 at 05:41
You the MAN!!! I edited my js file to insert the #overlay-2 into #wrap_all and the z-indexes for #overlay-2 and #header were already in sync the way I wanted. If you don't mind, for future reference, how do I target a header id for css. Is it the same as a div id? #header in this case? (see above html in the #wrap_all div. Thanks!!! — user3187895, Jan 27 '14 at 05:56
@user3187895 - Any element with an id is targeted the same as in `#header`. It doesn't matter what kind of tag it is - `
`, ``, `
` or whatever. Glad you got your issue sorted. — jfriend00, Jan 27 '14 at 05:59

score 0 · Answer 2 · edited May 23 '17 at 12:21

css position property is a must for z-index work

Use

Position:relative;

Edit: check this answer too https://stackoverflow.com/a/5218972/2967572

Point to note:

Most elements on a page are in a single, root stacking context, but absolutely or relatively positioned elements with non-auto z-index values form their own stacking contexts (that is, all of their children will be z-ordered within the parent and not be interleaved with content from outside the parent). As of Chrome 22, position:fixed elements will also create their own stacking contexts.

how z-index works with different position properties are explained Here

All of the elements are positioned; look at the CSS above. – Josh Crozier Jan 27 '14 at 05:01 — Josh Crozier, Jan 27 '14 at 05:01

z-index not working, not sure why

2 Answers2