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

У меня довольно простая структура div - древовидные блоки со средним блоком, выделенным 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);
}

& # X200B;

Один из элементов внутри этих полей имеет набор свойств background-color. По некоторым причинам этот фоновый цвет удаляет тень блока справа и только справа.

Есть идеи почему и как это исправить?

Живой пример проблемы: http://jsfiddle.net/SqvUd/

Ответы на вопрос(2)

Решение Вопроса

посмотрите пример.http://jsfiddle.net/SqvUd/2/

 13 мар. 2017 г., 17:11
С помощьюposition: relative; решил это и для меня! Большое спасибо, это сводило меня с ума, пытаясь решить это.
 05 окт. 2018 г., 19:36
@ItJustWerks Просто интересно, нашли ли вы решение вашей проблемы? Я сталкиваюсь с тем же самым
 15 мая 2012 г., 00:43
это было приятно :)
 07 апр. 2017 г., 19:20
Любые идеи по поводу этого для таблицы & lt; tr & gt; элемент, где положение не имеет никакого эффекта? В моем случае я хочу & lt; tr & gt; чтобы иметь тень от поля, но строки также имеют эффект наведения, который меняет цвет фона. Когда ряды вокруг ряда с затененными прямоугольниками наведены, они перекрывают тень на той стороне (сверху или снизу)
 Okapy14 мая 2012 г., 19:20
Спасибо, я попробовал z-index, но не подумал о положении: относительный; Это решает проблему.

ствующий CSS:

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

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

Ваш ответ на вопрос