So I've run into this problem a lot but not until a recent project did it bug me immensely.
<div style="background-image:url(img/s_top_ribbon_terminal.png); height:6px;"></div>
<div style="background-color:#FFF; box-shadow:rgba(0, 0, 0, 0.23) 0 0 16px; -moz-box-shadow:rgba(0, 0, 0, 0.23) 0 0 16px; -webkit-box-shadow:rgba(0, 0, 0, 0.23) 0 0 16px;">Lorem Ipsum</div>Lorem Ipsum
Basically, the situation goes: I have an element with an image or text that goes before another element which incorporates box shadow. The box shadow would then proceed to go over the first element, when I want the first element to be "in front of" (if that makes sense) the second element's shadow. How would I be able to do that? I tried z-index, but that didn't really seem to work?