CSS: Tại sao màu nền phá vỡ/xóa hộp đổ bóng?

Question

Tôi có một cấu trúc div khá đơn giản - hộp cây với hộp giữa đánh dấu bằng hộp bóng:

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

Một trong những yếu tố bên trong những hộp có một thuộc tính màu nền được thiết lập. Vì một số lý do, màu nền này loại bỏ hộp bóng từ bên phải và chỉ từ bên phải.

Mọi ý tưởng tại sao và cách khắc phục?

sống Ví dụ về các vấn đề: http://jsfiddle.net/SqvUd/

Answer 1

Bạn chỉ cần thêm z-index và position: relative; xem ví dụ. http://jsfiddle.net/SqvUd/2/

Answer 2

Nó phải làm với chỉ mục z của các mục. Hãy thử thêm số này vào css hiện tại của bạn:

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

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