javascript-固定位置上的父项时Z索引不起作用

我正在做一个菜单,我需要它的孩子具有较大的z索引,以便在打开该菜单时它位于模态的顶部.它完美地工作,但是当我将菜单设置为“ position：fixed”并打开模态时,孩子被保留在模态后面.这是代码,忽略css的最后一部分,它只是动画.谢谢您的帮助.

const btn = document.querySelector('.btn'),overlay = document.querySelector('.menu-overlay'),menu = document.querySelector('.responsive'),close = document.querySelector('.close'),barTop = document.querySelector('#bar-one'),barMiddle = document.querySelector('#bar-two'),barBottom = document.querySelector('#bar-three');


btn.addEventListener('click',function(){
    overlay.classList.toggle('active');
    menu.classList.toggle('menuActive');
    barTop.classList.toggle('barTop');
    barMiddle.classList.toggle('barMiddle');
    barBottom.classList.toggle('barBottom');
})

* {
  margin: 0;
  padding: 0;
  Box-sizing: border-Box;
}

.menu-container {
  background: teal;
  padding: 10px 0;
  width: 100%;
  /* here is the issue i´m talking about */
  /* position: fixed; */
}

.menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  margin: 0 auto;
}

.menu li {
  list-style: none;
  padding: 5px;
}

.menu li a {
  font-family: sans-serif;
  text-decoration: none;
  color: #fff;
}

.btn-container {
  z-index: 10000 !important;
}

.btn {
  text-decoration: none;
  display: flex;
  width: 22px;
  height: 18px;
  margin: 0 auto;
  flex-direction: column;
  justify-content: space-between;
}

.btn span {
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  transition: all .3s;
}

.btn #bar-one.barTop {
  transform: translateY(8px) rotate(45deg);
}
.btn #bar-three.barBottom {
  transform: translateY(-8px) rotate(-45deg);
}
.btn #bar-two.barMiddle {
  opacity: 0;
}

.menu-overlay {
  position: fixed;
  width: 100%;
  top: 0;
  bottom: 0;
  background: rgba(0,.8);
  animation: fadeOverlay .3s linear;
  display: none;
  z-index: 99;
}
.menu-overlay.active {
  display: block;
}

@keyframes fadeOverlay {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 100%;
  }
}

.responsive {
  width: 100%;
  height: 100vh;
  position: fixed;
  top: 0;
  left: -100%;
  z-index: 100;
  transition: left .2s ease-in-out;
}

.responsive ul {
  display: flex;
  flex-direction: column;
  background: #000;
  width: 87%;
  height: 100%;
  padding: 20px;
}

.responsive ul li {
  padding: 5px;
}

.responsive ul li a {
  text-decoration: none;
  color: #fff;
}

.responsive.menuActive {
  left: 0;
}

.close {
  text-decoration: none;
  display: block;
  color: #fff;
  width: 10%;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 40px;
  text-align: center;
  margin-top: 5px;
}

.close.closeActive {
  animation: fadeClose .4s linear;
}

@keyframes fadeClose {
  0%,90% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <Meta charset="UTF-8">
  <Meta name="viewport" content="width=device-width,initial-scale=1.0">
  <Meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Menu Celular</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <div class="menu-overlay"></div>
  <div class="menu-container">
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li class="btn-container">
        <a href="#" class="btn">
          <span id="bar-one"></span>
          <span id="bar-two"></span>
          <span id="bar-three"></span>
        </a>
      </li>
    </ul>
  </div>
  <div class="responsive">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Exit</a></li>
  </ul>
  </div>



<script src="./js.js" charset="utf-8"></script>
</body>
</html>

最佳答案

position：fixed创建一个堆栈上下文,强制将内部的所有元素都绘制在内部.您的问题是,现在,覆盖层覆盖了包含其所有元素的菜单容器,并且对内部元素设置更高的z-index将无济于事.在您的情况下,您将无法再将按钮容器移到该堆叠上下文之外.

您必须增加容器的z-index

const btn = document.querySelector('.btn'),function(){
    overlay.classList.toggle('active');
    menu.classList.toggle('menuActive');
    barTop.classList.toggle('barTop');
    barMiddle.classList.toggle('barMiddle');
    barBottom.classList.toggle('barBottom');
})

* {
  margin: 0;
  padding: 0;
  Box-sizing: border-Box;
}

.menu-container {
  background: teal;
  padding: 10px 0;
  width: 100%;
  /* here is the issue i´m talking about */
  position: fixed; 
  z-index:1000;
}

.menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  margin: 0 auto;
}

.menu li {
  list-style: none;
  padding: 5px;
}

.menu li a {
  font-family: sans-serif;
  text-decoration: none;
  color: #fff;
}

.btn-container {
  z-index: 10000 !important;
}

.btn {
  text-decoration: none;
  display: flex;
  width: 22px;
  height: 18px;
  margin: 0 auto;
  flex-direction: column;
  justify-content: space-between;
}

.btn span {
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  transition: all .3s;
}

.btn #bar-one.barTop {
  transform: translateY(8px) rotate(45deg);
}
.btn #bar-three.barBottom {
  transform: translateY(-8px) rotate(-45deg);
}
.btn #bar-two.barMiddle {
  opacity: 0;
}

.menu-overlay {
  position: fixed;
  width: 100%;
  top: 0;
  bottom: 0;
  background: rgba(0,initial-scale=1.0">
  <Meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Menu Celular</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <div class="menu-overlay"></div>
  <div class="menu-container">
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li class="btn-container">
        <a href="#" class="btn">
          <span id="bar-one"></span>
          <span id="bar-two"></span>
          <span id="bar-three"></span>
        </a>
      </li>
    </ul>
  </div>
  <div class="responsive">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Exit</a></li>
  </ul>
  </div>



<script src="./js.js" charset="utf-8"></script>
</body>
</html>

这样做会使所有容器都位于覆盖层上方,这也不是必需的结果.

万一您希望叠加层像最初一样运行,唯一的方法是将其放置在position：fixed元素内,然后将响应菜单移到该位置,以便使所有元素再次属于同一堆叠上下文,并且可以根据需要调整z-index

const btn = document.querySelector('.btn'),function(){
    overlay.classList.toggle('active');
    menu.classList.toggle('menuActive');
    barTop.classList.toggle('barTop');
    barMiddle.classList.toggle('barMiddle');
    barBottom.classList.toggle('barBottom');
})

* {
  margin: 0;
  padding: 0;
  Box-sizing: border-Box;
}

.menu-container {
  background: teal;
  padding: 10px 0;
  width: 100%;
  /* here is the issue i´m talking about */
  position: fixed; 
}

.menu {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  margin: 0 auto;
}

.menu li {
  list-style: none;
  padding: 5px;
}

.menu li a {
  font-family: sans-serif;
  text-decoration: none;
  color: #fff;
}

.btn-container {
  z-index: 10000 !important;
}

.btn {
  text-decoration: none;
  display: flex;
  width: 22px;
  height: 18px;
  margin: 0 auto;
  flex-direction: column;
  justify-content: space-between;
}

.btn span {
  display: block;
  width: 100%;
  height: 2px;
  background: #fff;
  transition: all .3s;
}

.btn #bar-one.barTop {
  transform: translateY(8px) rotate(45deg);
}
.btn #bar-three.barBottom {
  transform: translateY(-8px) rotate(-45deg);
}
.btn #bar-two.barMiddle {
  opacity: 0;
}

.menu-overlay {
  position: fixed;
  width: 100%;
  top: 0;
  bottom: 0;
  background: rgba(0,.8);
  animation: fadeOverlay .3s linear;
  display: none;
  z-index: 99;
}
.menu-overlay.active {
  display: block;
}

@keyframes fadeOverlay {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 100%;
  }
}

.responsive {
  width: 100%;
  height: 100vh;
  position: fixed;
  z-index:100;
  top: 0;
  left: -100%;
  z-index: 99;
  transition: left .2s ease-in-out;
}

.responsive ul {
  display: flex;
  flex-direction: column;
  background: #000;
  width: 87%;
  height: 100%;
  padding: 20px;
}

.responsive ul li {
  padding: 5px;
}

.responsive ul li a {
  text-decoration: none;
  color: #fff;
}

.responsive.menuActive {
  left: 0;
}

.close {
  text-decoration: none;
  display: block;
  color: #fff;
  width: 10%;
  position: absolute;
  top: 0;
  right: 0;
  font-size: 40px;
  text-align: center;
  margin-top: 5px;
}

.close.closeActive {
  animation: fadeClose .4s linear;
}

@keyframes fadeClose {
  0%,initial-scale=1.0">
  <Meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Menu Celular</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

  <div class="menu-container">
  <div class="menu-overlay"></div>
    <ul class="menu">
      <li><a href="#">Home</a></li>
      <li class="btn-container">
        <a href="#" class="btn">
          <span id="bar-one"></span>
          <span id="bar-two"></span>
          <span id="bar-three"></span>
        </a>
      </li>
    </ul>
  <div class="responsive">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Exit</a></li>
  </ul>
  </div>
  </div>



<script src="./js.js" charset="utf-8"></script>
</body>
</html>

如果无法更改HTML,则没有机会获得所需的内容.

相关问题以获取有关堆叠上下文和绘画顺序的更多详细信息：

Why elements with z-index can never cover its child?

How to z-index a repositioned div in css?

原文链接：https://www.f2er.com/html/530450.html

javascript-固定位置上的父项时Z索引不起作用

猜你在找的HTML相关文章