Существует ли альтернатива z-индексу для элементов без фиксированной/относительной/абсолютной позиции? ⇐ Html

[Anonymous]

Мне нужно отобразить один элемент на более высоком «z-уровне». Проблема в том, что элемент находится внутри div с «display: flex» и «justify-content: space-around». Обычное свойство z-index не работает, и я думаю, это потому, что элемент не имеет фиксированной/относительной/абсолютной позиции.

Есть ли способ решить эту проблему и присвоить элементу более высокое значение z?

Мне нужно увидеть гамбургер, когда открыта навигация
Код (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 */

Код: Выделить всё

[*]
Homepage | Team Jatrian





[img]./img/Logo.svg[/img]

Willkommen auf der Homepage von
Team Jatrian






[list]

[url=#]placeholder[/url]

[*]
[url=#]placeholder[/url]

[*]
[url=#]placeholder[/url]

[/list]


[url=#team]
[img]./img/arrow.svg[/img]
[/url]



Das Team
...

Der Roboter
...

Kontakt
...

Подробнее здесь: https://stackoverflow.com/questions/573 ... solute-pos