我需要在更高的"z-level". 问题是，该元素位于带有"display: flex"and的 div 内"justify-content: space-around"。normalz-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>首先第一件事：z-index 仅适用于定位元素，即具有position除默认值 ( static)以外的属性值。该display财产与该事项无关。
更新：这里曾经有过一次例外 -即使它“未定位”，z-index 也可以在flex 项目上工作
在不破坏当前样式的情况下“激活 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。
请记住 z-index 在stacking-contexts 中的工作：
每个堆叠上下文都有一个 HTML 元素作为其根元素。当在元素上形成新的堆叠上下文时，该堆叠上下文会将其所有子元素限制在堆叠顺序中的特定位置。这意味着如果一个元素包含在堆叠顺序底部的堆叠上下文中，则无法让它出现在堆叠顺序中更高的不同堆叠上下文中另一个元素的前面，即使有z-index 十亿！
意思是 if headeris to be above nav，这意味着所有header的孩子也将在上面nav，所以你可以考虑将汉堡包移动到不同的元素下。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句