CSS: Arka plan rengi neden gölgeyi kırıyor/kaldırıyor?

Question

Ben oldukça basit bir div yapısı var - orta kutusu ile ağaç kutular box-shadow ile vurgulanmış:

<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: elemanların

.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); 
} 

biri bu kutular var içeride bir arka plan rengi özellik kümesi. Bazı nedenlerden dolayı bu arka plan rengi kutu gölgesini sağdan ve sadece sağdan kaldırır.

Herhangi bir fikir neden ve nasıl düzeltebilir? Sorunun

Canlı Örnek: http://jsfiddle.net/SqvUd/

Answer 1

sadece z-index ve konumunu eklemem gerekiyor

: bağıl; örneğe bakın. http://jsfiddle.net/SqvUd/2/

Answer 2

Bu, öğelerin z-endeksiyle ilgilidir. Bunu varolan css'e eklemeye çalışın:

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

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