Div container hiding behind another div even though the z-index is at 999

Question

I am working on a new website layout and I am having a problem.

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.

I've changed the z-index to 999 on the sub menu container but hasn't made any difference.

If you click on the Home button (in the code below or at the JSFiddle link) you should see what I mean.

JSFiddle

 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; } 

 <!DOCTYPE html> <html> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> 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"); } </script> <header> <div style="width: 1024px; margin-left: auto; margin-right: auto;"></div> </header> <nav> <div class="menu"> <a class="menuHeaderButton" id="headerHome" href="javascript:clickHeader('Home');">Home</a> <a class="menuHeaderButton" id="headerBlog" href="javascript:clickHeader('Blog');">Blog</a> <a class="menuHeaderButton" id="headerCritiMon" href="#">CritiMon</a> </div> <div class="subMenuContainer" id="Home"> <a class="menuItem" href="#">Item 1</a> <a class="menuItem" href="#">Item 2</a> </div> <div class="subMenuContainer" id="Blog"> <a class="menuItem" href="#">Item 3</a> <a class="menuItem" href="#">Item 4</a> </div> </nav> <div id="container"> <p>Hello, the quick brown fox jumped over the lazy dogs back.</p> <p>All good men must come to the aid of the party.</p> </div> <footer>&copy; 2010 - 2015 | <a href="#">Privacy Policy</a> </footer> </body> </html> 

Answer 1

You forgot position: absolute; on .subMenuContainer . z-index does not affect statically positioned elements.

For a positioned box , the 'z-index' property specifies:

1. The stack level of the box in the current stacking context.
2. Whether the box establishes a stacking context.

^{http://www.w3.org/TR/CSS2/visuren.html#propdef-z-index}

^{(Emphasis mine)}

.subMenuContainer {
  background-color: #403537;
  
  width: 150px;
  padding-top: 10px;
  padding-bottom: 10px;
  clear: both;
  display: none;
  z-index: 999;
}

 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; position: absolute; 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; } 

 <!DOCTYPE html> <html> <body> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script> 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"); } </script> <header> <div style="width: 1024px; margin-left: auto; margin-right: auto;"></div> </header> <nav> <div class="menu"> <a class="menuHeaderButton" id="headerHome" href="javascript:clickHeader('Home');">Home</a> <a class="menuHeaderButton" id="headerBlog" href="javascript:clickHeader('Blog');">Blog</a> <a class="menuHeaderButton" id="headerCritiMon" href="#">CritiMon</a> </div> <div class="subMenuContainer" id="Home"> <a class="menuItem" href="#">Item 1</a> <a class="menuItem" href="#">Item 2</a> </div> <div class="subMenuContainer" id="Blog"> <a class="menuItem" href="#">Item 3</a> <a class="menuItem" href="#">Item 4</a> </div> </nav> <div id="container"> <p>Hello, the quick brown fox jumped over the lazy dogs back.</p> <p>All good men must come to the aid of the party.</p> </div> <footer>&copy; 2010 - 2015 | <a href="#">Privacy Policy</a> </footer> </body> </html> 

Answer 2

如果将float: left添加到.subMenuContainer类，则下拉菜单将显示在堆栈顶部。