Browser ignores z-index on overlay div

Question

On my page I have a navigation bar with a button that toggles a full-screen overlay. The button changes from three bars to a cross so it always needs to stay on top of the navigation so that it can be accessed by the user to close the overlay once they are finished with it. Here is the code that does this:

document.getElementById("navigation-toggle").onclick = function() {
  "use strict";
  document.getElementById("navigation-toggle").classList.toggle("navigation-toggle-animation");
  document.getElementById("navigation").classList.toggle("navigation-show");
};

#brandbar {
  background: #007cff;
  height: 80px;
  padding: 20px;
  position: fixed;
  top: 0;
  width: 100%;
}

#brandbar-product {
  float: left;
}

#brandbar-product-icon {
  float: left;
  height: 40px;
  margin-right: 20px;
}

#brandbar-product-text {
  float: left;
  font-weight: 500;
  line-height: 40px;
  margin: 0;
}

#brandbar-product-text a {
  color: #ffffff;
  text-decoration: none;
}

#navigation {
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.9);
  color: #ffffff;
  left: 0;
  overflow: auto;
  position: fixed;
  top: 0;
  transition: 0.5s;
  width: 100%;
  z-index: 1;
}

.navigation-hide {
  height: 0%;
}

.navigation-show {
  height: 100%;
}

#navigation-toggle {
  cursor: pointer;
  float: right;
  height: 25px;
  margin: 7.5px;
  z-index: 2;
}

#navigation-toggle-bar-1,
#navigation-toggle-bar-2,
#navigation-toggle-bar-3 {
  background-color: #ffffff;
  height: 5px;
  transition: 0.5s;
  width: 25px;
}

#navigation-toggle-bar-1,
#navigation-toggle-bar-2 {
  margin-bottom: 5px;
}

.navigation-toggle-animation #navigation-toggle-bar-1 {
  -webkit-transform: rotate(-45deg) translate(-5px, 9px);
  transform: rotate(-45deg) translate(-5px, 9px);
}

.navigation-toggle-animation #navigation-toggle-bar-2 {
  opacity: 0;
}

.navigation-toggle-animation #navigation-toggle-bar-3 {
  -webkit-transform: rotate(45deg) translate(-5px, -9px);
  transform: rotate(45deg) translate(-5px, -9px);
}

*,
*:before,
*:after {
  box-sizing: border-box;
}


/* Reset Styles*/

body {
  background-color: #f3f3ee;
  color: #24292e;
  font-family: Roboto;
  padding-top: 120px !important;
  height: 100%;
  left: 0;
  margin: 0;
  padding: 0;
  top: 0;
  width: 100%;
}

<div id="brandbar">
  <div id="brandbar-product">

    <a href="https://www.digytool.com/" title="Go to Digytool"><img alt="The Digytool Icon" id="brandbar-product-icon" src="https://system.digytool.com/images/icon/digytool-white.png" title="Digytool Icon"></a>

    <h1 id="brandbar-product-text"><a href="https://www.digytool.com/" title="Go to Digytool">Digytool</a></h1>

  </div>

  <div id="navigation-toggle">
    <div id="navigation-toggle-bar-1"></div>
    <div id="navigation-toggle-bar-2"></div>
    <div id="navigation-toggle-bar-3"></div>
  </div>


</div>

<div class="navigation-hide" id="navigation">
  Navigation<br> Navigation
  <br> Navigation
  <br> Navigation
  <br> Navigation
  <br> Navigation
  <br>
</div>

My problem is that the button is not keeping on top of the overlay, even though the button has z-index: 2 and the overlay has z-index: 1. I have tested it out in Chrome, IE / Edge and Safari and these browsers all seem to have the issue.

Just to explain...

• #brandbar is the main navigation bar.
• #brandbar-product and similar ids are to do with the logo and icon.
• #navigation is the overlay.
• .navigation-hide and .navigation-show toggle the navigation visibility. .navigation hide is always assigned to #navigation and when .navigation-show is added, it overrides .navigation hide.
• #navigation-toggle and similar ids and classes are to do with the button that toggles the overlay, and the animation that transforms it into a cross.

Could you please explain why the button is not rising to the top of the page, and give an example on how I could fix it.

Answer 1

The reason your close button is staying behind the overlay is because zindex only works between siblings (elements that are next to each other in the page) and not children/ancestors.

In your html navigation is a sibling of brandbar but navigation-toggle is a child of brandbar so therefore not a sibling of navigation.

Start by moving your <div id="navigation-toggle"> element up to the same level as <div class="navigation-hide" id="navigation">, then change the css for #navigation-toggle to add:

position: fixed;
top: 22px;
right: 20px;

you can also remove:

float: right;
height: 25px;

as they aren't needed.

Here's your code modified:

document.getElementById("navigation-toggle").onclick = function() {
  "use strict";
  document.getElementById("navigation-toggle").classList.toggle("navigation-toggle-animation");
  document.getElementById("navigation").classList.toggle("navigation-show");
};

#brandbar {
  background: #007cff;
  height: 80px;
  padding: 20px;
  position: fixed;
  top: 0;
  width: 100%;
}

#brandbar-product {
  float: left;
}

#brandbar-product-icon {
  float: left;
  height: 40px;
  margin-right: 20px;
}

#brandbar-product-text {
  float: left;
  font-weight: 500;
  line-height: 40px;
  margin: 0;
}

#brandbar-product-text a {
  color: #ffffff;
  text-decoration: none;
}

#navigation {
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.9);
  color: #ffffff;
  left: 0;
  overflow: auto;
  position: fixed;
  top: 0;
  transition: 0.5s;
  width: 100%;
  z-index: 1;
}

.navigation-hide {
  height: 0%;
}

.navigation-show {
  height: 100%;
}

#navigation-toggle {
  cursor: pointer;
  margin: 7.5px;
  z-index: 2;
  position: fixed;
  top: 22px;
  right: 20px;
}

#navigation-toggle-bar-1,
#navigation-toggle-bar-2,
#navigation-toggle-bar-3 {
  background-color: #ffffff;
  height: 5px;
  transition: 0.5s;
  width: 25px;
}

#navigation-toggle-bar-1,
#navigation-toggle-bar-2 {
  margin-bottom: 5px;
}

.navigation-toggle-animation #navigation-toggle-bar-1 {
  -webkit-transform: rotate(-45deg) translate(-5px, 9px);
  transform: rotate(-45deg) translate(-5px, 9px);
}

.navigation-toggle-animation #navigation-toggle-bar-2 {
  opacity: 0;
}

.navigation-toggle-animation #navigation-toggle-bar-3 {
  -webkit-transform: rotate(45deg) translate(-5px, -9px);
  transform: rotate(45deg) translate(-5px, -9px);
}

*,
*:before,
*:after {
  box-sizing: border-box;
}


/* Reset Styles*/

body {
  background-color: #f3f3ee;
  color: #24292e;
  font-family: Roboto;
  padding-top: 120px !important;
  height: 100%;
  left: 0;
  margin: 0;
  padding: 0;
  top: 0;
  width: 100%;
}

<div id="navigation-toggle">
  <div id="navigation-toggle-bar-1"></div>
  <div id="navigation-toggle-bar-2"></div>
  <div id="navigation-toggle-bar-3"></div>
</div>

<div id="brandbar">
  <div id="brandbar-product">
    <a href="https://www.digytool.com/" title="Go to Digytool"><img alt="The Digytool Icon" id="brandbar-product-icon" src="https://system.digytool.com/images/icon/digytool-white.png" title="Digytool Icon"></a>
    <h1 id="brandbar-product-text"><a href="https://www.digytool.com/" title="Go to Digytool">Digytool</a></h1>
  </div>
</div>

<div class="navigation-hide" id="navigation">
  Navigation
  <br> Navigation
  <br> Navigation
  <br> Navigation
  <br> Navigation
  <br> Navigation
  <br>
</div>

Answer 2

document.getElementById("navigation-toggle").onclick = function() {
  "use strict";
  document.getElementById("navigation-toggle").classList.toggle("navigation-toggle-animation");
  document.getElementById("navigation").classList.toggle("navigation-show");
};

#brandbar {
  background: #007cff;
  height: 80px;
  padding: 20px;
  position: fixed;
  top: 0;
  width: 100%;
}

#brandbar-product {
  float: left;
}

#brandbar-product-icon {
  float: left;
  height: 40px;
  margin-right: 20px;
}

#brandbar-product-text {
  float: left;
  font-weight: 500;
  line-height: 40px;
  margin: 0;
}

#brandbar-product-text a {
  color: #ffffff;
  text-decoration: none;
}

#navigation {
  background-color: #000000;
  background-color: rgba(0, 0, 0, 0.9);
  color: #ffffff;
  left: 0;
  overflow: auto;
  position: fixed;
  top: 0;
  transition: 0.5s;
  width: 100%;
  z-index: 1;
}

.navigation-hide {
  height: 0%;
}

.navigation-show {
  height: 100%;
}

#navigation-toggle {
cursor: pointer;
float: right;
height: 25px;
margin: 7.5px;
z-index: 2;
position: fixed;
top: 22px;
right: 20px;
}

#navigation-toggle-bar-1,
#navigation-toggle-bar-2,
#navigation-toggle-bar-3 {
  background-color: #ffffff;
  height: 5px;
  transition: 0.5s;
  width: 25px;
}

#navigation-toggle-bar-1,
#navigation-toggle-bar-2 {
  margin-bottom: 5px;
}

.navigation-toggle-animation #navigation-toggle-bar-1 {
  -webkit-transform: rotate(-45deg) translate(-5px, 9px);
  transform: rotate(-45deg) translate(-5px, 9px);
}

.navigation-toggle-animation #navigation-toggle-bar-2 {
  opacity: 0;
}

.navigation-toggle-animation #navigation-toggle-bar-3 {
  -webkit-transform: rotate(45deg) translate(-5px, -9px);
  transform: rotate(45deg) translate(-5px, -9px);
}

*,
*:before,
*:after {
  box-sizing: border-box;
}


/* Reset Styles*/

body {
  background-color: #f3f3ee;
  color: #24292e;
  font-family: Roboto;
  padding-top: 120px !important;
  height: 100%;
  left: 0;
  margin: 0;
  padding: 0;
  top: 0;
  width: 100%;
}

  <div id="navigation-toggle">
    <div id="navigation-toggle-bar-1"></div>
    <div id="navigation-toggle-bar-2"></div>
    <div id="navigation-toggle-bar-3"></div>
  </div>

<div id="brandbar">
  <div id="brandbar-product">

    <a href="https://www.digytool.com/" title="Go to Digytool"><img alt="The Digytool Icon" id="brandbar-product-icon" src="https://system.digytool.com/images/icon/digytool-white.png" title="Digytool Icon"></a>

    <h1 id="brandbar-product-text"><a href="https://www.digytool.com/" title="Go to Digytool">Digytool</a></h1>

  </div>


</div>

<div class="navigation-hide" id="navigation">
  Navigation<br> Navigation
  <br> Navigation
  <br> Navigation
  <br> Navigation
  <br> Navigation
  <br>
</div>