CSS：バックグラウンドカラーがボックスシャドウを分割/削除するのはなぜですか？

Question

私は非常に単純なdivの構造を持っている - 中央のボックスで木箱は、箱の影で強調表示：

<div class="offerBox"> 
    <div class="obOffer"> 
    <div class="obOfferTitle">Free</div>  
    <div class="obOfferPrice">Free</div>  
    </div> 
    <div class="obOffer obHiLight"> 
    <div class="obOfferTitle">Title</div>  
    <div class="obOfferPrice">$10</div>  
    </div> 
    <div class="obOffer"> 
    <div class="obOfferTitle">Title 2</div>  
    <div class="obOfferPrice">$10</div>  
    </div> 
</div>​ 

CSS：これらのボックス内の要素の

.offerBox {  
    width: 300px; 
    margin:10px;  
} 
.obOffer { 
    width: 33%; 
    float: left; 
    height: 100px; 
    text-align:center; 
} 

.obOfferPrice { 
    padding: 10px; 
    color: white; 
    background-color: #85AADD; 
} 

.obHiLight { 
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.6); 
    -moz-box-shadow: 0 0 25px rgba(0, 0, 0, 0.6); 
    -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.6); 
} 

一つ持っています背景色のプロパティセット。いくつかの理由から、この背景色はボックス影を右から削除し、右からのみ削除します。

なぜ、どのように修正するのですか？問題の

ライブ例： http://jsfiddle.net/SqvUd/

Answer 1

あなただけのzインデックスと位置を追加する必要があり

：相対;この例を参照してください。 http://jsfiddle.net/SqvUd/2/

Answer 2

アイテムのZ-インデックスと関係があります。あなたの既存のCSSにこれを追加してみてください：

.obOffer { 
    position: relative; 
    z-index: 10; 
} 

.obHiLight { 
    position:relative; 
    z-index: 100; 
}​