Question

I am creating a header which is a blue bar which is 40px high and spans 100% of the browser. It is static.

Under that (as in half hidden by the static blue bar) I want to position an image, but need the image to be centered in the browser. Also must be static.

Then on top of both of those I have the header content.

The problems are:

When i add any type of position instruction the blue bar is not fixed. The image always seems to be on top of the blue bar regardless of z-index settings. There is a gap at the top of the page, not the blue bar but the image and header content.

Here’s the css i’m trying:

#topbar {
width:100%;
height:42px;
margin:0;
padding:0;
background: #0066cc; 
/* make top bar stick to the top of browser */
position:fixed;
z-index:800;
/*Making sure it sticks to left of window in IE7*/
top:0;
left:0;
float:left;
-webkit-box-shadow: 0 8px 6px -6px #666;
    -moz-box-shadow: 0 8px 6px -6px #666;
    box-shadow: 0 8px 6px -6px #666;
position:absolute; /* if I remove this it sticks but still same other problems */
}

#top_blur {
width:940px;
margin:0 auto;
height:70px;
z-index:1;
background-image: url('/images_/backgrounds/top_blur.png');
background-repeat: no-repeat;
position:relative;
}

.header {
width:940px;
margin:0 auto;
}

and am firing it with:

<div id="topbar">
<div id="top_blur">
<div class="header">content here</div></div></div>

Answer 1

.header and #top_blur are children or decendents of #topbar so they will always be on top. See this https://developer.mozilla.org/en/Understanding_CSS_z-index/The_stacking_context for more details. Separating the divs will let you overlap them.

This fiddle may help: http://jsfiddle.net/zagc6/