z索引和定位

Question

我創建的報頭，其是藍色杆，它高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的decendents所以他們將永遠是最佳。有關更多詳細信息，請參閱此https://developer.mozilla.org/en/Understanding_CSS_z-index/The_stacking_context。分開div可以讓你重疊它們。

這撥弄可能會有幫助：http://jsfiddle.net/zagc6/