Css: Why Background-color Breaks/removes The Box-shadow?

I have a pretty simple div structure - tree boxes with middle box highlighted with box-shadow: ​ One of the elements inside those boxes have a background-color property set. For

Solution 1:

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

Solution 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;
}​

Solution 3:

adding .obHiLight{opacity:0.999} creates a new stacking context for that element, which makes it appear above the others as well. This might work for tables too (didn't test :) . @ItJustWerks @brian-tacker