html - 对于没有固定/相对/绝对位置的元素，是否有 z-index 替代方案？

Question

我需要在更高的 "z-level" 上显示一个元素。问题是，该元素位于带有 "display: flex" 和 "justify-content: space-around" 的 div 中。正常的 z-index 属性不起作用，我认为这是因为该元素没有固定/相对/绝对位置。
有没有办法解决这个问题，给元素一个更高的z-value？

当导航打开时，我需要看汉堡包代码(css 看起来很奇怪，因为我使用 sass):

const welcomeText = document.querySelector('.welcome-text');
const logo = document.querySelector('.logo');
const hamburger = document.querySelector('.hamburger');
const arrow = document.querySelector('.down-arrow');
const navLinks = document.querySelector('.nav-links');

hamburger.addEventListener('click', () => {
    navLinks.classList.toggle('open');
    hamburger.classList.toggle('open');
})

@import url("https://fonts.googleapis.com/css?family=Montserrat:400,500&display=swap");
* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

.introduction {
  width: 98%;
  margin: auto;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  height: 90vh;
  -webkit-transform: translateY(10vh);
          transform: translateY(10vh);
}

.introduction .logo img {
  height: 10vh;
}

.introduction .hamburger {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  height: 8vh;
  width: 8vh;
  background: black;
  border-radius: 50%;
  z-index: 3;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: space-evenly;
      -ms-flex-pack: space-evenly;
          justify-content: space-evenly;
}

.introduction .hamburger .bar {
  z-index: 3;
  margin: -10% 0;
  background: white;
  width: 70%;
  height: 1vh;
}

.introduction .welcome-text {
  font-family: 'Montserrat', sans-serif;
  text-align: center;
  font-size: 20px;
}

.introduction .welcome-text span {
  color: #d1a33f;
}

.nav-links {
  position: absolute;
  top: 0%;
  z-index: 1;
  height: 100vh;
  width: 100%;
  background: black;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-pack: distribute;
      justify-content: space-around;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-clip-path: circle(0% at 98% 55%);
          clip-path: circle(0% at 98% 55%);
  -webkit-transition: all 1s ease-out;
  transition: all 1s ease-out;
}

.nav-links li {
  list-style: none;
}

.nav-links.open {
  -webkit-clip-path: circle(100% at 98% 55%);
          clip-path: circle(100% at 98% 55%);
}

.nav-link {
  color: white;
  text-decoration: none;
}

.down-arrow {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-animation-name: arrowAnim;
          animation-name: arrowAnim;
  -webkit-animation-duration: 2s;
          animation-duration: 2s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
}

.down-arrow img {
  width: 15vh;
}

.down-arrow img:hover {
  width: 18vh;
}

@-webkit-keyframes arrowAnim {
  0% {
  }
  50% {
    -webkit-transform: translateY(-3rem);
            transform: translateY(-3rem);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes arrowAnim {
  0% {
  }
  50% {
    -webkit-transform: translateY(-3rem);
            transform: translateY(-3rem);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

main {
  padding-top: 10vh;
}

main .roboter {
  text-align: right;
}
/*# sourceMappingURL=style.css.map */

<!DOCTYPE html>
<html lang="de">

<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">
    <link rel="stylesheet" href="./style.css">
    <title>Homepage | Team Jatrian</title>
</head>

<body>
    <header class="introduction">
        <div class="logo">
            <img src="./img/Logo.svg" alt="logo">
        </div>
        <div class="welcome-text">
            <h1>Willkommen auf der Homepage von <br /><span class="golden-text">Team Jatrian</span></h1>
        </div>
        <div class="hamburger">
            <div class="bar 1"></div>
            <div class="bar 2"></div>
            <div class="bar 3"></div>
        </div>
    </header>
    <nav>
        <ul class="nav-links">
            <li>
                <a href="#" class="nav-link">placeholder</a>
            </li>
            <li>
                <a href="#" class="nav-link">placeholder</a>
            </li>
            <li>
                <a href="#" class="nav-link">placeholder</a>
            </li>
        </ul>
    </nav>
    <div class="down-arrow">
        <a href="#team">
            <img src="./img/arrow.svg" alt="downArrow">
        </a>
    </div>
    <main>
        <div class="team" id="team">
            <h1>Das Team</h1>
            <p>...</p>
        </div>
        <div class="roboter">
            <h1>Der Roboter</h1>
            <p>...</p>
        </div>
        <div class="kontakt">
            <h1>Kontakt</h1>
            <p>...</p>
        </div>
    </main>
    <script src="script.js"></script>
</body>

</html>

Answer 1

第一件事:z-index only works on positioned elements ，即有一个 position默认值 ( static ) 以外的属性值。 display属性(property)与此事无关。

更新:这里曾经有一个异常(exception) - z-index 将在 flex item 上工作，即使它是“未定位的”

在不破坏当前样式的情况下“激活 z-index”的最简单方法是使用 position:relative ，因为它本身不会改变 UI 行为。也就是说，如果您没有提供任何偏移量属性 ( top/bottom/left/right )

现在针对您的具体情况 - 问题不仅在于汉堡 z-index 激活，而且在于它位于 header 中。元素，而菜单项 ( .nav-links ) 在 nav 中元素。自 header和 nav元素在这里是兄弟，你应该选择哪个应该在另一个之上。

你可以给header高z-index实现这一目标的值(value)，例如:

header {
    z-index: 2; // higher than nav-links z-index (1)
    position: relative;
}

这将使 humburder 位于顶部，但整个标题包括文本 Team Jatrian .

请记住 stacking-contexts 中的 z-index 工作:

Every stacking context has a single HTML element as its root element. When a new stacking context is formed on an element, that stacking context confines all of its child elements to a particular place in the stacking order. That means that if an element is contained in a stacking context at the bottom of the stacking order, there is no way to get it to appear in front of another element in a different stacking context that is higher in the stacking order, even with a z-index of a billion!

意思是如果header是在nav之上, 表示所有 header的 child 会在 nav 以上同样，因此您可能会考虑将汉堡包移动到不同的元素下。