title: Display fixed position element's child above absolutely positioned overlay
body: <p>I have a layout containing two columns. The left column scrolls vertically and the right column is fixed. The right column contains multiple sections.</p>
  
  <p>At some point, an overlay will be displayed. I want it to cover all content except for the first section in the right column (<code>&lt;aside class="one"&gt;...&lt;/aside&gt;</code>).</p>
  
  <p>Right now, when the overlay is displayed it covers everything, including the <code>aside.one</code> element even though it has a higher z-index value.</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;!-- ... --&gt;
  
  &lt;section id="sidebar"&gt;
      &lt;aside class="one"&gt;...&lt;/aside&gt;
      &lt;aside class="two"&gt;...&lt;/aside&gt;
  &lt;/section&gt;
  
  &lt;!-- ... --&gt;
  
  &lt;div class="overlay"&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>CSS:</strong></p>
  
  <pre><code>#sidebar {
      position: fixed;
  }
  
  .one {
      z-index: 3;
  }
  
  .overlay {
      bottom: 0;
      left: 0;
      position: absolute;
      right: 0;
      top: 0;
      z-index: 2;
  }
  </code></pre>
  
  <p>Here is a jsFiddle illustrating a more complete example of my problem: <a href="http://jsfiddle.net/ncSWz/10/" rel="noreferrer">http://jsfiddle.net/ncSWz/10/</a></p>
  
  <p>I know I will need to change some of my HTML structure to get this working, but I'm unsure exactly where to start.</p>
  
  <p>Thanks in advance.</p>