title: CSS z-index not working with child-elements
body: <p>Ive tried for a personal project to do menus, that are opened on highest layer (z-index 3) so they overlay my board, but the header in which they are is at lowest layer (z-index 1), so the board was assigned to mid-layer (z-index 2).
  Logically this looks fine to me, but menu is displayed as it was below z-index 2...
  Ive ran out of ideas how to fix that.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>* {
    margin: 0;
    padding: 0;
  }
  #header {
    width: 512px;
    height: 256px;
    position: fixed;
    z-index: 1;
    background-color: red;
  }
  div&gt;ul {
    width: 512px;
    height: 128px;
    position: fixed;
    z-index: 3;
    background-color: blue;
  }
  ol {
    width: 480px;
    height: 320px;
    margin: 32px 16px 0 16px;
    position: fixed;
    z-index: 2;
    background-color: green;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="header"&gt;
    &lt;ul&gt;&lt;/ul&gt;
  &lt;/div&gt;
  &lt;ol&gt;
  &lt;/ol&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="http://codepen.io/PaHell/pen/mVGJxd" rel="nofollow noreferrer">CodePen Sample</a></p>