同じレベルのドロップシャドウを持つ2つのdiv

Question

私はドロップシャドウを持つ2つのdivがあり、同じz-インデックスにあります。

現在、お互いに影を投げかけています。

両方ともバックグラウンドでシャドウをキャストしたいが、お互いにシャドウを重ねることは望ましくない。これはどうすればいいですか？

Answer 1

同じスタッキングレベルの2つの異なる要素を持つことはできません。要素には常に異なるスタッキングレベルがあります。それで、あなたの2番目の要素が最初の要素を陰にしているのです。

Z-indexは、非静的に配置された要素（相対、絶対）でのみ機能するので、どちらも役に立ちません。

IMOあなたはいくつかの小さなCSSハッキングなしであなたが望む効果を達成することはできません（追加のラッパー要素と組み合わされた要素の静的でない位置を宣言します - 子要素について）。

Example

しかし、私は間違っているなら、私を修正すること自由に感じなさい。

Answer 2

この単純なCSSトリックを使用して、擬似要素:afterを作成し、Z-インデックスをdivsより低く設定し、影を付けます。次のコードでは、それぞれdivの下に重なっていない影を落とします。作業例はhttp://jsfiddle.net/on38a8pz/1/です。

div { 
    position: relative; 
} 

div:after { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    box-shadow: 0 0 30px black; 
    z-index: -1; 
}