title: z-index and burger menu
body: <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>body {
    background-color: #313449;
    font-family: 'Open Sans', sans-serif;
  }
  #menu-toggle {
    z-index: 1;
    }
    /* Hidden Checkbox */
    #menu-toggle input {
      opacity: 0;
      width: 40px;
      height: 40px;
      z-index: 2;
      /* checkbox on top */
      position: absolute;
      top: 0;
      left: 0;
    }
    #menu-toggle input:checked {
      transition: all 0.3s ease;
    }
    /* Hamburger */
    #menu-toggle span {
      display: block;
      width: 30px;
      border: #ffffff 2px solid;
      margin-top: 5px;
      border-radius: 2px;
      transition: all 0.3s ease;
      transform-origin: 0 0;
    }
    #menu-toggle input:checked ~ span {
      /* all bars - top bar */
      transform: rotate(45deg) translate(-1px, -3px);
      border-color: #000000;
    }
    #menu-toggle input:checked ~ span:nth-child(3) {
      /* middle bar */
      transform: scale(0, 0);
      opacity: 0;
    }
    #menu-toggle input ~ span:nth-child(4) {
      /* bottom bar */
      transform-origin: 0 100%;
    }
    #menu-toggle input:checked ~ span:nth-child(4) {
      transform: rotate(-45deg) translate(0, 2px);
    }
    /* Menu Content */
    #menu-toggle input:checked ~ #menu {
      /* display menu */
      left: 0;
    }
    #menu-toggle #menu {
      background-color: grey;
      background-color: rgba(255, 255, 255, 1);
      width: 100px;
      height: auto;
      padding: 30px 30px;
      text-align: center;
      position: absolute;
      top: 0;
      left: -160px;
      margin-top: 0;
      transition: all 0.3s ease;
    }
    #menu-toggle li {
      list-style: none;
      margin: 30px 0;
    }
    #menu-toggle a li {
      color: #000000;
      text-decoration: none;
      transition: color 0.3s ease;
    }
    #menu-toggle a li:hover {
      color: red;
      transition: color 0.3s ease;
    }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;nav role="navigation"&gt;
    &lt;div id="menu-toggle"&gt;
      &lt;input type="checkbox" /&gt;
      &lt;span&gt;&lt;/span&gt;
      &lt;span&gt;&lt;/span&gt;
      &lt;span&gt;&lt;/span&gt;
  
      &lt;ul id="menu"&gt;
        &lt;a href="#"&gt;
          &lt;li&gt;Home&lt;/li&gt;
        &lt;/a&gt;
        &lt;a href="#"&gt;
          &lt;li&gt;Contact&lt;/li&gt;
        &lt;/a&gt;
        &lt;a href="#"&gt;
          &lt;li&gt;Sign in&lt;/li&gt;
        &lt;/a&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  &lt;/nav&gt;
  
  &lt;section&gt;
    &lt;h1&gt;Title&lt;/h1&gt;
    &lt;p&gt;
      Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nam commodo suscipit quam. Donec sodales sagittis magna.
      &lt;br /&gt;
      &lt;br /&gt;Nulla neque dolor, sagittis eget, iaculis quis, molestie non, velit. Donec vitae sapien ut libero venenatis faucibus. In hac habitasse platea dictumst.
      &lt;br /&gt;
      &lt;br /&gt;Cras ultricies mi eu turpis hendrerit fringilla. Morbi mollis tellus ac sapien. Nam commodo suscipit quam.
      &lt;br /&gt;
      &lt;br /&gt;Vestibulum turpis sem, aliquet eget, lobortis pellentesque, rutrum eu, nisl. Phasellus magna. Phasellus nec sem in justo pellentesque facilisis.
    &lt;/p&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Hi, </p>
  
  <p>I am struggling with my burger menu. It is hidden under my #menu div and I cannot find why. I tried z-index to my spans but it is not working. </p>
  
  <p>What am I doing wrong here?</p>
  
  <p>I also cannot understand why my 2 span and my third span are nth-child(3) and (4)? It is working like this but I cannot figure out why it's not (2) and (3).</p>
  
  <p>Thanks;</p>