title: How can I layer two <div>s in a flexbox container?
body: <p>I have a flexbox container that has two <code>&lt;div&gt;</code>s in it.  One of the <code>&lt;div&gt;</code>s is the header, and the other <code>&lt;div&gt;</code> is hidden until an event is fired. When said event is fired, I want to make the hidden <code>&lt;div&gt;</code> appear on top of the other.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .header {
    max-width: 600px;
  }
  
  #content {
    display: none;
    max-width: 600px;
  }
  
  .changed #content {
    display: block;
    z-index: 100;
  }
  
  .changed .header {
    opacity: .3;
    z-index: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="container"&gt;
    &lt;div class="header"&gt;
      &lt;h1&gt;Heading&lt;/h1&gt;
      &lt;h2&gt;Subheading&lt;/h2&gt;
      &lt;div class="icons"&gt;Icons&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="content"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>The class <code>.changed</code> is the class added to <code>.container</code> that renders the <code>#content</code> <code>&lt;div&gt;</code> visible.  This part works fine.</p>
  
  <p>The problem is that the <code>.header</code> and the <code>#content</code> <code>&lt;div&gt;</code>s are appearing side-by-side, even though they each have different <code>z-index</code> values. I think this is because of flexbox.</p>
  
  <p>I've tried using different methods of horizontal and vertical centering, but flexbox has gotten me the closest to what I want.  Is this the right approach and I'm just missing something?  Should I go about this a different way?</p>
  
  <p>Thanks!</p>