css - css - 絶対配置を使用して、含まれているすべての div をカバーするボックス シャドウ

Question

ここに参照があり ます http://cssdesk.com/rHWcz

私がやろうとしているのは、含まれている div の 1 つをボックスの影の下に置くことです。絶対配置を使用すると問題が発生する可能性があると思いますが、絶対配置する必要があります。どちらでもかまいませんが、ボックス div の 1 つをボックス シャドウの上に配置することはできません。何か案は？

Answer 1

.left, .right {
  z-index: -1;
}

ただし、背景色を削除する必要があり.outます。別のボックスの影と背景の間に要素を配置する方法はありません。

Answer 2

もう 1 つの方法は、コンテナーの高さと幅の別の要素を作成し、絶対値で左上に配置することです。

ここで例を見ることができます

position:absolute;
top:0;
left:0;
width:100%;
height:100%;

box-shadow で配置された要素の下のコンテンツをクリックできないという問題が発生します。これを回避する方法は、ユーザーがホバーしたときに非表示にすることです。