title: Box-shadow over next sibling div
body: <p>I have a box shadow on a div that i want to stick out like a bar over the next div on the page, but when the next div has a background or background image, it won't show up. is there a way of the shadow showing over the next element even though they are both "position:initial;"
  <a href="http://jsfiddle.net/2u4Lvyn0/2/" rel="noreferrer">http://jsfiddle.net/2u4Lvyn0/2/</a> 
  so the shadow should overlook the blue box below it  </p>
  
  <p>HMTL</p>
  
  <pre><code>&lt;div class="background-image-div"&gt;&lt;/div&gt;
  &lt;div class="box-shadow-div"&gt;&lt;/div&gt;
  &lt;div class="background-image-div"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.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;
  }
  </code></pre>
  
  <p>I've seen a lot of posts on 'inset box-shadow' not working with it's own divs background image but couldn't find anything about just regular sibling divs.</p>