title: Overlay / hover a div in flexbox container div
body: <p>I'm trying to overlay a div that would float with in a flexbox container.</p>
  
  <p>The header is a flexbox container and there are three flexbox divs that work in the container. The overlay I want to overlay the other three divs but still be constrained within the .header flexbox container div.</p>
  
  <p>I've tried multiple methods on stackoverflow and elsewhere, but how not seen a solution that addresses overlay or layering when used in conjunction flexbox.</p>
  
  <p>Thank you for any suggestions!</p>
  
  <p>Link to the jsfiddle of the following: <a href="http://jsfiddle.net/karlgo/UHECE/" rel="noreferrer">Link</a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="header"&gt;
      &lt;div class="headerLeft"&gt;Left&lt;/div&gt;
      &lt;div class="headerMiddle"&gt;Middle&lt;/div&gt;
      &lt;div class="headerRight"&gt;Right&lt;/div&gt;
      &lt;div class="overlay"&gt;Overlay&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.header {
      border: 3px solid orange;
      width: 100%;
      display: -webkit-flex;
      display: flex;
      z-index: 0;
  }
  
  .headerLeft {
      border: 2px solid chartreuse;
      -webkit-flex: 1;
      flex: 1;
      z-index: 1;
  }
  .headerMiddle {
      border: 2px solid darkorchid;
      -webkit-flex: 1;
      flex: 1;
      z-index: 1;
  }
  .headerRight {
      border: 2px solid darkorange;
      -webkit-flex: 1;
      flex: 1;
      z-index: 1;
  }
  
  .overlay {
      border: 2px solid green;
      z-index: 10;
      background: rgba(0,0,0,0.3);
  }
  </code></pre>