覆蓋父元素的子元素

Question

基本上，我的網站佈局方式中，我有一些元素具有超出內容頁面的完整寬度背景（例如導航欄背景完全穿過頁面）。所以基本上我決定要做的是在內容div內創建另一個div，併爲導航欄起作用，但對於站點的下一部分，出於某種原因，子元素覆蓋了所有瀏覽器中的父元素。我不明白爲什麼它似乎適用於導航欄部分。

這裏是CSS

#top-slider { 
width:100%; 
height:400px; 
background: #222; /* Show a solid color for older browsers */ 
background: -moz-linear-gradient(#fefefe, #f1f1f1); 
background: -o-linear-gradient(#fefefe, #f1f1f1); 
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fefefe), to(#f1f1f1)); /* older webkit syntax */ 
background: -webkit-linear-gradient(#fefefe, #f1f1f1); 
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px; 
-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px; 
box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px; 
float:left; 
padding-bottom:20px; 
position:relative; 
width:980px; 


} 

#top-slider-full-bar { 
position:absolute; 
left:-9999px; 
width:99999px; 
background: #222; /* Show a solid color for older browsers */ 
background: -moz-linear-gradient(#fefefe, #f1f1f1); 
background: -o-linear-gradient(#fefefe, #f1f1f1); 
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#fefefe), to(#f1f1f1)); /* older webkit syntax */ 
background: -webkit-linear-gradient(#fefefe, #f1f1f1); 
-webkit-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px; 
-moz-box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px; 
box-shadow: rgba(0, 0, 0, 0.4) 0px 1px 2px; 
height:400px; 

}

這裏是網站，http://limerickchambers.hailstormcommerce.com你可以看到，它似乎是導航欄工作正常... 我用盡z-index但似乎沒有效果。 limerickchambers.hailstormcommerce.com

謝謝

Answer 1

考慮更改HTML結構是這樣的：http://jsfiddle.net/KpTHz/

這將讓這一切更容易管理。

<div class="outer"> 
<div class="inner">HEADER</div> 
</div> 

<div class="outer"> 
<div class="inner">CONTENT</div> 
</div> 

<div class="outer"> 
<div class="inner">FOOTER</div> 
</div> 


.outer { 
width:100%; 
background:#ccc; 
} 

.inner { 
width:920px; 
background:#999; 
margin:0 auto 20px; 
padding:20px; 
}