CODEWITHSUNDEEP
htmloverlayz-indexcss
user1723097
user1723097

Reputation: 109

CSS Box-Shadow div overlay

I have a problem with a box-shadow, being obscured by another div.

Here is my code:

HTML-

<div id="wrap">
        <div id="header">
            <div id="nav"></div>
        </div>  
        <div id="main_content"></div>
        <div id="footer"></div>
    </div>

CSS-

body{
    margin:0;
}
#wrap{
    margin:0 auto;

    width:84%;
}
#header{    
    background-image:url(img/header_pattern.png);
    background-repeat:repeat;

    margin:0 auto;

    width:100%;
    height:170px;

    box-shadow:5px 5px 5px black;
    z-index:1;
}
#main_content{
    background-image:url(img/main_pattern.png);
    background-repeat:repeat;

    width:100%;
    min-height:700px;
    height:100%;
    z-index:2;

}

Screenshot-

https://i.sstatic.net/TfDyi.png

How can I make it so that the shadow is not "stacked under" (on the z-axis), and hence obscured by, the #main_content div, but still inside my #wrap?

Thanks.

No, I don't just wan't to push the #main_content down.

Upvotes: 4

Views: 7026

Answers (2)

Sepster
Sepster

Reputation: 4849

You need to "position" an element, if you want to "stack" it differently on the z-axis using z-index.

Note that if you don't actually want to change its position on the x/y plane, then just specify that it is position:relative; without any of the top, bottom, left or right x/y offsets and it'll be positioned on the x/y plane where it would've been laid down statically anyway.

From MDN on adding a z-index:

Warning! z-index only has an effect if an element is positioned.

I found their series of articles Understanding CSS z-index really helpful with this stuff.

Upvotes: 0

Develoger
Develoger

Reputation: 3998

Just add:

position: relative;

To #header{

Example:
http://jsfiddle.net/kJajC/

Upvotes: 7

Related Questions