CODEWITHSUNDEEP
css
user3187895
user3187895

Reputation: 27

z-index not working, not sure why

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>

Upvotes: 1

Views: 272

Answers (2)

jfriend00
jfriend00

Reputation: 707466

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.

Upvotes: 3

Sajad Karuthedath
Sajad Karuthedath

Reputation: 15767

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

Upvotes: 0

Related Questions