4

フィドル: http://jsfiddle.net/G5FaQ/

divに含まれる画像があります。上記の画像のすぐ隣にある div には、ボックスの影があります。div のボックス シャドウを画像に重ねて表示したいので、画像が div の一部であるように見えます。フィドルでわかるように、z-index を試しましたが、失敗したようです。

HTML:

<body>

<nav id="navigation">
    <img src="http://web.fildred.com/media/images/blank_logo.jpg" height="150px" width="250px" alt="logo">
</nav>

<div id="content_wrapper">
<!-- InstanceBeginEditable name="content" -->
<section id="content">
    Content.
</section>
<!-- InstanceEndEditable -->
</div>

</div>
</body>

CSS:

body {
    background: #ffd288;    
}

/*Nav*/
#navigation {
    width:100%;
    z-index: 10;
}

.logo {
    z-index: 1; 
}

/*Content Section*/
#content {
    background: #393951;
    height: 2000px;
    z-index: 10;
    -webkit-box-shadow: 0px 0px 20px rgba(0,0,0,.8);
        -moz-box-shadow: 0px 0px 20px rgba(0,0,0,.8);
            box-shadow: 0px 0px 20px rgba(0,0,0,.8);
}
4

3 に答える 3

10

あなたはほとんどそれを持っていました！あなたがする必要があるのは、絶対位置またはコンテナーに対する相対位置を追加することだけです! コンテナーを通常の dom 要素のように動作させたい場合は相対位置に、自由にフロートさせたい場合は絶対位置にします!

position:relative;

http://jsfiddle.net/G5FaQ/1/

頑張ってください。別の質問がある場合はお知らせください:)

于 2013-09-24T16:42:12.617 に答える
3

#navigationあなたのIDに何らかのポジショニングを与えてください...それは使用するための要件z-indexです..

#navigation {
    position: absolute;
    width:100%;
    z-index: 10;
}

デモ

于 2013-09-24T16:41:55.417 に答える