title: Div container hiding behind another div even though the z-index is at 999
body: <p>I am working on a new website layout and I am having a problem. </p>
  
  <p>I click on a menu which triggers some Javascript to display a menu container. This appears using the jquery toggle function. It appears for a second and then when it finishes the div hides behind my main content div so you can't see it. </p>
  
  <p>I've changed the <code>z-index</code> to 999 on the sub menu container but hasn't made any difference. </p>
  
  <p>If you click on the Home button (in the code below or at the JSFiddle link) you should see what I mean. </p>
  
  <p><a href="https://jsfiddle.net/ht56f9my/2/" rel="nofollow">JSFiddle</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,
  body {
    font-family: arial;
    margin: 0;
    padding: 0;
  }
  h1 {
    font-size: x-large;
    font-weight: bold;
    color: #403537;
  }
  header {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: xx-large;
    font-weight: bold;
    vertical-align: central;
    background-color: #403537;
  }
  #container {
    width: 1024px;
    margin-left: auto;
    margin-right: auto;
    background-color: #E5E2E4;
    border: #BFBDBE solid thin;
    border-radius: 5px;
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
  }
  form.loginForm {
    width: 500px;
    margin-left: auto;
    margin-right: auto;
    background-color: #E5E2E4;
    border: #BFBDBE solid thin;
    border-radius: 5px;
    margin-top: 40px;
    margin-bottom: 10px;
    padding: 10px;
    clear: both;
    white-space: normal;
  }
  input[type=text],
  input[type=password] {
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    transition: border linear .2s, box-shadow linear .2s;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
    width: 360px;
    margin-top: 10px;
    margin-bottom: 10px;
    outline: none;
  }
  input[type=text]:required:focus,
  input[type=password]:required:focus {
    box-shadow: 4px 4px 5px rgba(200, 0, 0, 0.40);
    outline: none;
  }
  input[type=text]:valid:focus,
  input[type=password]:valid:focus {
    box-shadow: 4px 4px 5px rgba(27, 127, 18, 0.40);
    outline: none;
  }
  input[type=submit] {
    width: 120px;
    padding: 10px;
    color: white;
    background: #3239ff;
    /* Old browsers */
    background: -moz-linear-gradient(top, #3239ff 1%, #0d1cc1 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(1%, #3239ff), color-stop(100%, #0d1cc1));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #3239ff 1%, #0d1cc1 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #3239ff 1%, #0d1cc1 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #3239ff 1%, #0d1cc1 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #3239ff 1%, #0d1cc1 100%);
    /* W3C */
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#3239ff', endColorstr='#0d1cc1', GradientType=0);
    border-radius: 5px;
    border: black solid thin;
    font-size: medium;
    text-shadow: 2px 2px 1px rgba(0, 0, 0, 1);
  }
  label {
    width: 100px;
    margin-right: 10px;
    text-align: right;
  }
  #pageTitle {
    width: 800px;
    border-bottom: #BFBDBE solid thin;
    margin-left: auto;
    margin-right: auto;
  }
  footer {
    color: #BFBDBE;
    text-align: center;
    font-size: small;
    margin-top: 50px;
  }
  footer a {
    color: #BFBDBE;
    text-decoration: none;
  }
  footer a:hover {
    text-decoration: underline;
  }
  #errorToolbox {
    position: absolute;
    width: auto;
    height: auto;
    border-radius: 5px;
    display: none;
    padding: 8px;
    background-color: #403537;
    z-index: 9999;
    color: white;
    box-shadow: 4px 4px 5px rgba(0, 0, 0, 0.40);
  }
  nav {
    background: #403537;
    /* Old browsers */
    background: -moz-linear-gradient(top, #403537 0%, #665459 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #403537), color-stop(100%, #665459));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #403537 0%, #665459 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #403537 0%, #665459 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #403537 0%, #665459 100%);
    /* IE10+ */
    background: linear-gradient(to bottom, #403537 0%, #665459 100%);
    /* W3C */
    filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#403537', endColorstr='#665459', GradientType=0);
    height: 40px;
  }
  .menu {
    width: 1024px;
    margin-left: auto;
    margin-right: auto;
    height: calc(100% - 20px);
    padding: 10px;
  }
  a.menuHeaderButton {
    width: 100px;
    margin-left: 1px;
    margin-right: 1px;
    height: 100%;
    float: left;
    font-weight: bold;
    color: white;
    text-shadow: 4px 4px 7px rgba(117, 110, 110, 1);
    text-decoration: none;
  }
  .subMenuContainer {
    background-color: #403537;
    width: 150px;
    padding-top: 10px;
    padding-bottom: 10px;
    clear: both;
    display: none;
    z-index: 999;
  }
  .menuItem {
    clear: both;
    display: block;
    margin-left: 5px;
    margin-right: 5px;
    padding-top: 8px;
    padding-bottom: 8px;
    border-bottom: #BFBDBE solid thin;
    padding-left: 4px;
    transition: all linear .2s, box-shadow linear .2s;
    z-index: 999;
  }
  .menuItem:hover {
    background-color: #BFBDBE;
  }
  a.menuItem {
    text-decoration: none;
    color: white;
    z-index: 999;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;body&gt;
    &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script&gt;
      function clickHeader(headerName) {
        //Get the position of the header menu
        var position = $("#header" + headerName).position();
        //alert("Left: " + position.left);
        $(".subMenuContainer").hide();
        $("#" + headerName).css({
          "margin-left": position.left
        })
        $("#" + headerName).toggle("medium");
      }
    &lt;/script&gt;
    &lt;header&gt;
      &lt;div style="width: 1024px; margin-left: auto; margin-right: auto;"&gt;&lt;/div&gt;
    &lt;/header&gt;
    &lt;nav&gt;
      &lt;div class="menu"&gt; &lt;a class="menuHeaderButton" id="headerHome" href="javascript:clickHeader('Home');"&gt;Home&lt;/a&gt;
        &lt;a class="menuHeaderButton" id="headerBlog" href="javascript:clickHeader('Blog');"&gt;Blog&lt;/a&gt;
        &lt;a class="menuHeaderButton" id="headerCritiMon" href="#"&gt;CritiMon&lt;/a&gt;
  
      &lt;/div&gt;
      &lt;div class="subMenuContainer" id="Home"&gt; &lt;a class="menuItem" href="#"&gt;Item 1&lt;/a&gt;
        &lt;a class="menuItem" href="#"&gt;Item 2&lt;/a&gt;
  
      &lt;/div&gt;
      &lt;div class="subMenuContainer" id="Blog"&gt; &lt;a class="menuItem" href="#"&gt;Item 3&lt;/a&gt;
        &lt;a class="menuItem" href="#"&gt;Item 4&lt;/a&gt;
  
      &lt;/div&gt;
    &lt;/nav&gt;
    &lt;div id="container"&gt;
      &lt;p&gt;Hello, the quick brown fox jumped over the lazy dogs back.&lt;/p&gt;
      &lt;p&gt;All good men must come to the aid of the party.&lt;/p&gt;
    &lt;/div&gt;
    &lt;footer&gt;&amp;copy; 2010 - 2015 | &lt;a href="#"&gt;Privacy Policy&lt;/a&gt; 
    &lt;/footer&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>