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

【问题标题】：Is there a z-index alternative for elements without a fixed/relatic/absolute position?对于没有固定/相对/绝对位置的元素，是否有 z-index 替代方案？
【发布时间】：2019-08-06 16:49:31
【问题描述】：

我需要在更高的"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>

【问题讨论】：

嗨！请添加minimal reproducible example，以便我们看到您的css和html。
您好！您能给我们提供一个代码示例吗？
Z-Index without absolute position的可能重复
有什么原因不能设置 position: relative？
答案是“否”。您不能在静态元素上使用 z-index 属性。它们必须是相对的、固定的或绝对的项目。

标签： html css z-index

【解决方案1】：

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

更新： 这里曾经有一个例外 - z-index 将在 flex item 上工作，即使它“未定位”

在不破坏当前样式的情况下“激活 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 位于顶部，但整个标题包括文本 Team Jatrian。

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

每个堆叠上下文都有一个 HTML 元素作为其根元素。当在元素上形成新的堆叠上下文时，该堆叠上下文将其所有子元素限制在堆叠顺序中的特定位置。这意味着如果一个元素包含在堆叠顺序底部的堆叠上下文中，则无法让它出现在堆叠顺序更高的不同堆叠上下文中的另一个元素之前，即使使用z-index 十亿！

如果header 高于nav，则意味着header 的所有子级也将高于nav，因此您可以考虑将汉堡包移动到不同的元素下。

【讨论】：