Box shadow over the next child div

Question

I have a box shadow on a div that I want to cross out as a panel above the next div on the page, but when the next div has a background or background image, it will not appear. is there a shadow method showing the next element, even if they are a "position: initial"; http://jsfiddle.net/2u4Lvyn0/2/ so the shadow should ignore the blue square below it

Hmtl

<div class="background-image-div"></div> <div class="box-shadow-div"></div> <div class="background-image-div"></div> 

CSS

 .box-shadow-div{ height:100px; background:orange; -webkit-box-shadow: 0px 3px 3px 15px rgba(0,0,0,1); -moz-box-shadow: 0px 3px 3px 15px rgba(0,0,0,1); box-shadow: 0px 3px 3px 15px rgba(0,0,0,1); } .background-image-div{ height:100px; background:blue; border:1px solid yellow; } 

I saw a lot of posts about "inset box-shadow" not working with its own divs background image, but couldn't find anything about just regular div divs.

Answer 1

Adding position:relative; will be fixed. Although this may affect other CSS settings that you already have.

http://jsfiddle.net/2u4Lvyn0/5/