javascript - 浏览器忽略覆盖 div 上的 z-index

Question

在我的页面上，我有一个导航栏，其中有一个按钮可以切换全屏覆盖。该按钮从三个栏变为十字形，因此它始终需要保持在导航的顶部，以便用户可以访问它以在完成后关闭覆盖。这是执行此操作的代码:

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>

我的问题是按钮没有保持在叠加层之上，即使按钮具有 z-index: 2 并且叠加层具有 z-index: 1。我已经在 Chrome、IE/Edge 和 Safari 中测试过了，这些浏览器似乎都有问题。

只是为了解释...

• #brandbar 是主导航栏。
• #brandbar-product 和类似的 id 与 Logo 和图标有关。
• #navigation 是叠加层。
• .navigation-hide 和 .navigation-show 切换导航可见性。 .navigation hide 总是分配给 #navigation 并且当添加 .navigation-show 时，它会覆盖 .navigation hide.
• #navigation-toggle 和类似的 id 和类与切换叠加层的按钮以及将其转换为十字的动画有关。

能否请您解释一下为什么按钮没有上升到页面顶部，并举例说明如何解决它。

Answer 1

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>