对于没有 fixed/relatic/absolute 位置的元素，是否有 z-index 替代方案？

Question

我需要在更高的 "z-level" 上显示一个元素。问题是，该元素位于 div 内，带有 "display: flex" 和 "justify-content: space-around"。正常的 z-index 属性不起作用，我认为那是因为该元素没有 fixed/relative/absolute 位置。
有没有办法解决这个问题，给元素更高的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 属性与此无关。

更新： 这里有一次例外 - z-index 将在 flex item 上工作，即使它是 "unpositioned"

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

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

您可以给 header 更高的 z-index 值来实现，例如：

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

这将使 humburder 位于顶部，但整个 header 包括文本 Team Jatrian。

记住 z-index 在 stacking-contexts 中工作：

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 的所有 children 也将高于 nav，所以您可能会考虑将汉堡包移动到不同的元素下。

对于没有 fixed/relatic/absolute 位置的元素，是否有 z-index 替代方案？

Is there a z-index alternative for elements without a fixed/relatic/absolute position?

html

css

z-index