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/

z-index和定位

1 个答案: