CSS: Perché il colore di sfondo rompe/rimuove l'ombra della scatola?

Question

Ho una bella struttura semplice div - scatole albero con casella centrale evidenziata con box-shadow:

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

Uno degli elementi dentro quelle scatole hanno un insieme di proprietà del colore di sfondo. Per alcuni motivi questo colore di sfondo rimuove l'ombra della casella da destra e solo da destra.

Qualche idea, perché e come risolverlo?

vivo esempio del problema: http://jsfiddle.net/SqvUd/

Answer 1

Hai solo bisogno di aggiungere z-index e position: relative; vedere l'esempio. http://jsfiddle.net/SqvUd/2/

Answer 2

Ha a che fare con lo z-index degli articoli. Prova ad aggiungere questo al tuo css esistente:

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

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