title: Z-index "stacking" in creating a shadow
body: <p>I have the following HTML structure that I'd like to keep nested:</p>
  
  <pre><code>&lt;div class="parent"&gt;
      &lt;div class="shadow"&gt;Shadow here!&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.parent {
      background: blue;
      z-index: 2;
      height: 200px;
  
  }
  
  .shadow {
      background: lightgrey;
      z-index: 0;
      opacity: 0.4;
      position: relative;
      top: 194px;
  }
  </code></pre>
  
  <p>Essentially, I want the <code>div .shadow</code> to be underneath the <code>div .parent</code>. If you look at the rendering at the below link, you can see that part of the parent's blue background goes through the shadow; instead, I'd like the parent element to cover that overlapping part (stacked on top of, I guess you can say): </p>
  
  <p><a href="https://jsfiddle.net/9ya7kb67/" rel="nofollow">https://jsfiddle.net/9ya7kb67/</a></p>
  
  <p>How could I do this? I'm fiddling around with z-index, but that isn't helping.</p>