Question

我遇到了一个盒子阴影的问题，被另一个div遮挡了。

这是我的代码：

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

如何使阴影不会“堆积在”（在z轴上），因此被#main_content div遮挡，但仍在我的#wrap内？

感谢。

不，我不只是想推动#main_content。

Answer 1

只需添加：

position: relative;

至#header{

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

Answer 2

如果要使用z-index在z轴上以不同方式“堆叠”元素，则需要“定位”元素。

请注意，如果您实际上并不想更改其在x / y平面上的位置，那么只需指定它position:relative;而没有任何top，bottom， left或right x / y偏移量，它将位于x / y平面上，无论如何它都会静态放置。

来自MDN on adding a z-index：

警告！ z-index仅在元素定位时才有效。

我发现他们的系列文章Understanding CSS z-index对这些内容非常有帮助。

CSS Box-Shadow div overlay

2 个答案: