CSS: ¿Por qué el color de fondo rompe/elimina la sombra de la caja?

Question

tengo una estructura bastante simple div - cajas de árboles con cuadro central resaltada 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 de los elementos dentro de esas cajas tienen un conjunto de propiedades de color de fondo. Por alguna razón, este color de fondo elimina la sombra de cuadro de la derecha y solo de la derecha.

¿Alguna idea de por qué y cómo solucionarlo?

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

Answer 1

Sólo tiene que añadir z-index y position: relative; mira el ejemplo. http://jsfiddle.net/SqvUd/2/

Answer 2

Tiene que ver con el índice Z de los elementos. Intente agregar esto a su css existente:

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

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