2012-03-12 11 views
-2

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

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

+3

いくつかのコードを表示できますか? – BoltClock

+0

次に、オブジェクト1をオブジェクト2の上に置きます。 – Starx

+0

まさに!私の答えを見る – jacktheripper

答えて

0

は、あなたがオブジェクト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

-1

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

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

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

-1

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

関連する問題