html - CSS: Why background-color breaks/removes the box-shadow?

Question

I have a pretty simple div structure - tree boxes with middle box highlighted with box-shadow:

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

<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>?

Answer 1

You just need to add z-index and position:relative; see the example. http://jsfiddle.net/SqvUd/2/