1

私はここにあるcssドロップシャドウテクニックを使用しています：

http://nicolasgallagher.com/css-drop-shadows-without-images/demo/

前後の疑似クラスを使用して、シャドウをより形にします。問題は、他の要素の上に影を表示できないことです。

これがjsfiddleです：http：//jsfiddle.net/S7dzj/6/

さまざまなzインデックスを使用してdivのさまざまな相対配置を試しました。私はまた、トップdiv内のヘッダー要素を移動しようとしましたが、助けにはなりません。また、上部のdivを相対的に移動して、ヘッダーtop: -5pxのdivの下に配置しようとしましたが、それでも影はありません。

これを達成する方法はありますか？

4

2 に答える 2

4

  1. z-indexプロパティは、ではない要素にのみ適用されるposition: staticため、.topクラスはそのプロパティを単に無視していました。

  2. あなた.headerと.topクラスは両方とも同じz-indexだったので、ヘッダーが一番上に表示されていました。

更新されたjsFiddleを参照してください。私がしたのは、に追加position: relativeして（それ自体は視覚的に何もしません）、.topに変更することだけz-indexた-2。

于 2012-09-02T01:04:42.117 に答える
0

影を重ねたい場合は.top、animusonの答えを参照してください。

そうでない場合は、 http：//jsfiddle.net/S7dzj/8/を参照してください。

.drop-shadow{
    margin-bottom:10px;
}

余白を追加すると、影が表示されます。

于 2012-09-02T01:08:21.987 に答える