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

css, html

Solution

You just need to add `z-index` and `position:relative;` See the example:

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

Problem

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>​ ``` ​ One of the elements inside those boxes have a background-color property set. For some reasons this background-color removes the box-shadow from the right and only from the right. Any ideas why and how to fix it? Live Example of the problem: http://jsfiddle.net/SqvUd/

Original source