title: Prevent box shadow from showing on top of another element
body: <p>I have been trying to make a section and an article so that it appears that the article is sitting on top of the section using box shadows. The problem is that the blur of the section is also spreading onto the article (when i want only the box shadow of the article spreading onto the section). I've been trying to use z-index to position the article higher than the section as I've seen working in many other answered questions but nothing seems to be working and i can't for the life of me, figure out why. I would like to avoid a white box shadow method because it would more than likely effect anything inside the article but any method that works would be great. Here is a <a href="http://jsfiddle.net/OliverGriffin/Dmgz2/#base" rel="nofollow">JSFiddle</a> to play around with. Help would be much obliged. Thanks.</p>
  
  <p>Basic HTML Setup:</p>
  
  <pre><code>&lt;article&gt;article&lt;br /&gt;article&lt;br /&gt;article&lt;br /&gt;article&lt;br /&gt;I dont want the box shadow of the section overlapping this box here \/&lt;/article&gt;
  &lt;section&gt;section&lt;br /&gt;section&lt;br /&gt;section&lt;br /&gt;section&lt;br /&gt;section&lt;br /&gt;section&lt;br /&gt;section&lt;br /&gt;section&lt;br /&gt;section&lt;/section&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>article {
      position: relative;
      z-index: 0;
      width: 600px;
      margin: 100px auto 0;
      padding: 20px;
      border: orange 1px solid;
      box-shadow: 0 0 100px 1px orange;
  }
  
  section {
      position: relative;
      z-index: -1;
      width: 400px;
      margin: 0 auto;
      padding: 20px;
      border: orange 1px solid;
      box-shadow: 0 0 100px 1px orange;
      border-top: none;
  }
  </code></pre>