CSS: Почему фоновый цвет разбивает/удаляет тень?

Question

У меня есть довольно простая структура дел - дерево коробка с коробкой средней подсвечивается коробчатой ​​тень:

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