0

タイトルとコンテンツの 2 つのボックスがあります。これらにボックスシャドウを使用して、見栄えを良くしています。現在、両方の影が重なって表示されています。しかし、私はタイトルの影がコンテンツボックスの上に浮かないようにしたい.

position: をタイトル ボックスに対して相対的に追加すると、コンテンツの影がタイトルの上に浮かびなくなります (これはまさに私がやりたいことですが、その逆です)。しかし、逆のことをしようとしてもうまくいきません。Z-indexも機能していないようです。

フィドル: http://jsfiddle.net/JR93S/24/

h2 {
    width: 300px;
    margin: 20px 0px 0px 20px;
    padding: 5px 11px 5px 11px;

    border-radius: 3px;

    color: #333;
    background-color: #CCF;

    box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.5);
}

div {
    width: 300px;
    height: 300px;
    margin: 0px 0px 0px 20px;
    padding: 10px 10px 10px 10px;

    border: 1px solid #999;

    border-radius: 3px;

    box-shadow: 0px 0px 10px 10px rgba(0,0,0,0.5);
}

<h2>title</h2>
<div>some stuff here</div>

何か案は？ありがとう！

4

2 に答える 2

0

わかりましたこれのトリックは追加することでした...

background-color: #FFF;

...divへ。z-index が機能するようになりました。

于 2012-07-02T23:16:38.487 に答える
0

insetオーバーラップを避けるために、ボックス シャドウを使用することもできます。

こちらhttp://jsfiddle.net/JR93S/25/

編集

これはあなたが望む効果だと思います。

http://jsfiddle.net/JR93S/31/

于 2012-07-02T22:11:16.563 に答える