html - z-index 和定位

Question

我正在创建一个 header ，它是一个 40 像素高且跨越 100% 浏览器的蓝色条。它是静态的。

在此之下(被静态蓝色条隐藏了一半)我想定位图像，但需要图像在浏览器中居中。也必须是静态的。

然后在这两个之上我​​有标题内容。

问题是:

当我添加任何类型的位置指令时，蓝色条不固定。无论 z-index 设置如何，图像似乎总是位于蓝色条的顶部。页面顶部有一个空白，不是蓝色条，而是图像和标题内容。

这是我正在尝试的 CSS:

#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;
}

并用以下方式发射它:

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

Answer 1

.header 和#top_blur 是#topbar 的子项或后代，因此它们将始终位于顶部。看这个https://developer.mozilla.org/en/Understanding_CSS_z-index/The_stacking_context更多细节。分隔 div 将使它们重叠。

这个 fiddle 可能有帮助:http://jsfiddle.net/zagc6/