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平面上の位置を実際に変更したくない場合は、、、、またはx / yオフセットがないことを指定するだけで、x/y平面上に配置されることに注意してposition:relative;ください。とにかく静的に置かれていたでしょう。topbottomleftright

z-indexの追加に関するMDNから：

警告！z-indexは、要素が配置されている場合にのみ効果があります。

私は彼らの一連の記事「CSSz-indexを理解する」がこのようなものに本当に役立つことに気づきました。

于 2012-10-05T13:30:17.337 に答える