レイヤー（特にシャドウ）の順序を指定するにはどうすればよいですか？

Question

私は赤い部分の影が白い部分と重なっていることを望みます。その逆もありません。

適用CSS：

#container { (the white part) 
    width: 960px; 
    margin: 0 auto 24px auto; 
    background: #FFFAFA; /*background: url(images/grid.png) center top no-repeat;*/ 
    box-shadow: 0px 5px 45px #343434; 
} 

#banner { (the red part) 
    background: -moz-linear-gradient(top, #BC4E4C 0%, #9E403F 100%); 
    background: -webkit-linear-gradient(top, #BC4E4C 0%, #9E403F 100%); 
    height: 40px; 
    width: 100%; 
    box-shadow: 0px 10px 10px #343434; 
    border-bottom: 1px solid #612525; 
} 

それは、バナーのHTMLの主な内容の前に、重要だ場合。ありがとう！

Answer 1

position: relative~#bannerを追加するだけで、新しい"stacking context"が作成されます。

---

ちょうど安全のために：あなたはまた、影のように上部に表示されるようにしたいあなたの質問に含まれていない他の要素がある場合は、 かもしれないも z-index: a numberを必要としています。

Answer 2

CSSプロパティz-indexを使用してください。 z-indexが高くなると、要素が前面に表示されます。あなたの例では

は

#container { 
    z-index: 1; 
} 
#banner { 
    z-index: 2; 
} 

を追加し、それが動作します。