4

我有一个盒子阴影的问题，被另一个 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_contentdiv遮挡，但仍然在我的内部#wrap？

谢谢。

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

4

2 回答 2

7

只需添加：

position: relative;

至#header{

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

于 2012-10-05T13:24:32.013 回答
0

如果您想在 z 轴上使用z-index.

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

从MDN 添加 z-index：

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

我发现他们的系列文章Understanding CSS z-index对这些东西很有帮助。

于 2012-10-05T13:30:17.337 回答