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

.offerBox { 
  border-radius: 6px; 
  width: 300px; 
  margin: 10px; 
}

.obOffer {
  position: relative; // 👈 this
  width: 33%; 
  float: left;
  height: 100px; 
  text-align: center; 
  z-index: 0;
}

.obOfferPrice {
  padding: 10px;   
  color: white;
  background-color: #85AADD; 
}

.obHiLight {
  z-index: 10;
  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>