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与徽标和图标有关。
#navigation是叠加层。
.navigation-hide和.navigation-show切换导航可见性。 .navigation hide始终分配到#navigation，添加.navigation-show后，它会覆盖.navigation hide。
#navigation-toggle和类似的ID和类与切换叠加层的按钮以及将其转换为十字形的动画有关。

请您解释为什么按钮没有上升到页面顶部，并举例说明我如何修复它。

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 2

你的关闭按钮留在叠加层后面的原因是因为zindex只适用于兄弟姐妹（页面中彼此相邻的元素）而不是儿童/祖先。

在您的html中navigation是brandbar的兄弟，但navigation-toggle是brandbar的孩子，因此不是navigation的兄弟。

首先将<div id="navigation-toggle">元素移至与<div class="navigation-hide" id="navigation">相同的级别，然后更改#navigation-toggle的css以添加：

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

你也可以删除：

float: right;
height: 25px;

因为不需要它们。

以下是您修改的代码：

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>

浏览器忽略覆盖div

2 个答案: