的box-shadow不會對DIV

Question

我有一個頁面，看起來像這樣的底部顯示：

box-shadow http://www.morninj.com/images/box-shadow-screenshot.png

中間DIV（「報價」與它的內容）有一個盒子應用了陰影屬性。出於某種原因，如果第三個div存在，陰影不會出現在第二個div下面。有人知道爲什麼嗎？

HTML：

<div id="header"> 
    <h1>Title</h1> 
</div><!--/#header--> 
<div id="subheader"> 
    <h2>"Quotation."</h2> 
</div><!--/#subheader--> 
<div id="blurb"> 
    <div id="blurb-container"> 
     <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p> 
    </div><!--/#blurb-container--> 
</div><!--/#blurb--> 

CSS：

div#header { 
    background-color: #444; 
    padding: 20px 0; 
} 

    div#header h1 { 
     color: #fff; 
     font-family: 'Arvo', sans-serif; 
     font-size: 50px; 
     font-weight: bold; 
     text-align: center; 
     text-shadow: 1px 1px 1px #000; 
    } 

div#subheader { 
    background-color: #777; 
    box-shadow: 0 0 3px 2px #333; 
    padding: 10px; 
} 

    div#subheader h2 { 
     color: #efefef; 
     font-family: 'Merriweather', serif; 
     font-size: 14px; 
     font-style: italic; 
     line-height: 24px; 
     text-align: center; 
    } 

div#blurb { 
    background-color: #efefef; 
    padding: 20px; 
} 

    div#blurb div#blurb-container { 
     margin: 0 auto; 
     width: 800px; 
    } 

Answer 1

你的 '導語' 被覆蓋起來。編輯div#blurb CSS規則以下將其移動陰影的div後面：

div#blurb { 
    background-color: #efefef; 
    padding: 20px; 
    position:relative; 
    z-index:-1; 
} 

Answer 2

設置兩個元件相對於和第一個1的z索引和下一個爲0

的位置

編輯：是的，負值是允許的:)。但他們不工作在Firefox 2.