divのコンテナのCSSボックスのシャドウがオフになる

Question

編集：もっと一般的な質問： divのボックスシャドウが好きですが、ボックスの影のdivのすぐ下にdivを配置すると、 z-インデックスを乱しても上に重ならない。だから、ボックスシャドウは別のdivをオーバーレイできないようだ？どんなアイデアも素晴らしいだろう！

オリジナルの質問 レイアウト用に青写真を使用しています。つまり、コンテナに950pxがあり、それには#contentが含まれています。

この場合、#contentはコンテナ全体を塗りつぶすので、950pxでもあります。

#contentにドロップシャドウがありますが、問題はシャドウがなくなり、.containerにそれを見るためのスペースが残っていないことです。

回避方法は、#contentの幅を狭くすることですが、これは既に配置されているレイアウトの位置を崩してしまい、狭すぎます。

ボックスシャドウを親コンテナを無視して表示する方法はありますか？これは私が推測する青写真の特定ではありませんが、それは文脈です。ありがとう！

EDIT：

body .container { 
    margin: 0 auto; 
    overflow: hidden; 
    width: 950px; 
} 
body .container:after { 
    clear: both; 
    content: ""; 
    display: table; 
} 
#content { 
    display: inline; 
    float: left; 
    margin-right: 0; 
    width: 950px; 
    box-shadow: 0 0 4px black; 
    -moz-box-shadow: 0 0 4px black; 
} 

#contentは.containerに直接です。私が#contentにドロップシャドウを置くと、幅を縮めて内側の要素を混乱させるまで、それを見ることはできません。

Answer 1

.container要素にいくつかのパディングを追加し、#contentが必要な幅に収まっていることを確認します。

Answer 2

.containerをもっと広くすることができます（960は固定幅に対して完全に受け入れられます）。#contentを.containerの中央に維持します。それはあなたのために何かを混乱させるか？

Answer 3

.containerにはすでにクリアフィックスを使用しているので、overflow: hiddenは必要ありません。だから、あなたはただそれを捨てることができます：http://jsfiddle.net/kizu/gDXLf/

Answer 4

すべてはあなたが達成しようとしているものによって異なります。

私はリスト項目のインラインブロックグループに問題がありました。右の影がホバー時横に表示されているリスト項目によって切断された

簡単なハックがちょうど要素に以下を追加することですが、

li:hover { 
    transform: scale(1,1); 
    -moz-transform: scale(1,1); 
    -webkit-transform: scale(1,1); 
    -o-transform: scale(1,1); 
    -ms-transform: scale(1,1); 
} 

WORKING EXAMPLE

、これを特定のシナリオでのみ機能します。私は上記の私の例でそれをテストしました。