CSS 盒阴影 div 叠加层

Question

我遇到了一个关于box-shadow的问题，它被另一个

所遮挡。

这是我的代码：

HTML-

<div id="wrap">
        <div id="header">
            <div id="nav"></div>
        </div>  
        <div id="main_content"></div>
        <div id="footer"></div>
    </div>

CSS-

body{
    margin:0;
}
#wrap{
    margin:0 auto;

    width:84%;
}
#header{    
    background-image:url(img/header_pattern.png);
    background-repeat:repeat;

    margin:0 auto;

    width:100%;
    height:170px;

    box-shadow:5px 5px 5px black;
    z-index:1;
}
#main_content{
    background-image:url(img/main_pattern.png);
    background-repeat:repeat;

    width:100%;
    min-height:700px;
    height:100%;
    z-index:2;

}

屏幕截图 -

http://i.stack.imgur.com/TfDyi.png

如何使阴影不被 #main_content div 遮挡，而仍然在我的 #wrap 中，而不是“堆叠在下面”（在 z 轴上）？谢谢。不，我不只是想将 #main_content 推下去。

- user1723097

---

请查看：https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow :) - F. Müller

Answer 1

只需添加:

position: relative;

转换为中文：

到 #header{

例子：
http://jsfiddle.net/kJajC/

- Develoger

Answer 2

如果你想在z轴上以不同的方式“堆叠”元素，你需要“定位”它，并使用z-index。请注意，如果您实际上不想改变它在x/y平面上的位置，则只需指定它为position:relative;，而没有任何top、bottom、left或right的x/y偏移量，它将在x/y平面上放置，就像静态布局一样。从 MDN关于添加z-index中可以看到：

警告！只有在元素被定位时，z-index才会生效。

我发现他们的一系列文章理解CSS z-index在这方面非常有帮助。

- Sepster