シャドウ（CSS）のZ-インデックスを設定する方法

Question

私はZ-インデックスのボックスを持っているとします.4 + CSSシャドウです。 Z-indexの2つのボックスがあるとします。

オブジェクト1の影をオブジェクト2の上にするにはどうすればよいですか？

Answer 1

は、あなたがオブジェクト2を超える

HTML

<div id="shadow"> </div> 
<div id="under"> </div> 

CSS

#shadow { 
    background-color: #35BFFF; 
    height: 300px; 
    width: 100px; 
    -moz-box-shadow: 0px 0px 11px rgba(0,0,0,1); 
    -webkit-box-shadow: 0px 0px 11px rgba(0,0,0,1); 
    box-shadow: 0px 0px 11px rgba(0,0,0,1); 
    float: left; 
    z-index: 999; 
    position: relative; 
} 
#under { 
    float: left; 
    height: 300px; 
    width: 100px; 
    background-color: red; 
    position: relative; 
} 
​ 

Live demo

Answer 2

影の順序、つまりどの影がどのdivに当たるかは、divのz-インデックスによって設定され、それが要求している場合は独立に設定することはできません。

Zインデックスが大きいDivは、z-indexのものよりも上になり、シャドウが投影されます。

私のhomepageには、シャドウと異なるz-indexの2つのdivがあります。ブラウザウィンドウのサイズを変更して、それらを重複させて、自分で効果を見ることができます。ここで

Answer 3

プットオブジェクト1探しているものの一例ですオブジェクト1は底に影がない。