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

​ 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/

Answer 1

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

Answer 2

It has to do with the z-index of the items. Try adding this to your existing css:

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