z索引和定位

Question

我正在创建一个标题栏，该标题栏是一个蓝色栏，高度为40px，跨浏览器的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将使您重叠它们。

这个小提琴可能会有所帮助： http : //jsfiddle.net/zagc6/