html - 同じレベルにあるドロップ シャドウ付きの 2 つの div

Question

ドロップ シャドウがあり、同じ z-index にある 2 つの div があります。

彼らは現在、お互いに影を落としています。

両方とも背景に影を落としたいのですが、お互いに影を落としてはいけません。どうすればいいですか？

Answer 1

同じスタック レベルの 2 つの異なる要素を持つことはできません。要素には常に異なるスタック レベルがあります。そのため、2 番目の Element が最初の Element をシャドウします。(z-index がない場合、DOM での外観によってスタック レベルが決まります)

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

IMO 少しの css-hacking なしでは、必要な効果を達成することはできません (追加のラッパー要素と組み合わせた要素で非静的位置を宣言します-親で z-index を宣言しないで、子でのみ宣言します-要素)。

例

しかし、私が間違っている場合はお気軽に修正してください。

Answer 2

この単純な CSS トリックを使用して、疑似要素を作成し:after、その z-index を div よりも低く設定して、それに影を付けます。次のコードは、各 の下に重ならない影をドロップします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;
}