Dropdown menu is hidden behind my hero image - html

Question

I am having a problem with the hero image, it always hides my dropdown menu even though I put a higher z-index on the menu. I have found a "solution" for this, I gave the hero image z-index:-1, but now my button on the hero image doesn't work. I want to have this work without any workarounds.
jsfiddle here (here the dropdown works, because #hero-img has z-index:-1, but the top button doesn't work)
https://jsfiddle.net/xLo7wcph/1/
1) please help me find a reason why the z-index > 0 doesn't work + solution for this, without using z-index:0;
2) bonus question, why the button doesn't work when I set the hero img on negative z-index even though I have btn z-index : 1;
<nav id="navbar" class="flex">
<div class="flex-1 "><img src="images/drevo2.svg"></div>
<div class="flex-2 ">falco's woodwork.</div>
<div class="flex-3 flex-element push">
domů
</div>
<div class="flex-4 flex-element">
nabídka
<div class="dropdown">
<p>motýlci</p>
<p>dekorace</p>
<p>ostatní</p>
</div>
</div>
<div class="flex-5 flex-element">
kontakt
</div>
<div class="flex-6 flex-element">
nákup
</div>
</nav>
<div id="hero-img">
<div class="text-box">
<h1>
<span class="text-box--main">objevte krásu</span>
<br>
<span class="text-box--sub">ručně tvořených výrobků</span>
<br>
</h1>
</div>
<button class="btn"><img src="images/SIPKA DOLU.svg"></button>
</div>
#navbar{
border-bottom:solid 1px black;
.dropdown{
position:absolute;
z-index: 3;
display:none;
border-top:none;
padding:1rem 2rem;
background-color: rgba(0, 0, 0, 0.801);
left:-1.8rem;
top:3.7rem;
p{
color:white;
&:hover{
border-bottom: 1px solid white;
}
}
}
.flex-element:hover .dropdown{
display:block;
z-index: 2;
}
}
#hero-img{
position: relative;
background:linear-gradient(to top, black 0%, rgba(0, 0, 0, 0.5) 0%), url("../images/hero image.jpg") no-repeat top;
height: calc(100vh - 3.8rem);/* - vyska nav baru*/
background-size: cover;
z-index: -1;
}

Answer 1

Removing z-index: -1; from the #hero-img and adding these lines solves your problem.
#navbar{
position: relative;
z-index: 1;
}
Initially what was happening is, position: relative on #hero-img was hiding your dropdown. because position-wise #hero-img was upper than #navbar. that's why you should also add z-index in the #navbar.
And you gave negative z-index value to appear the dropdown. when you give negative z-index to an element it will be rendered under other elements.
In this case, the #hero-img was under the body. the button won't show up when you give high z-index value because it's parent #hero-img is under the top layer.
working demo:
btn,
.btn:link,
.btn:visited {
background-color: rgba(255, 255, 255, 0);
border-style: none;
animation: btnFadeIn .5s ease-in forwards;
outline: none;
position: absolute;
bottom: 2%;
left: 50%;
transform: translateX(-50%);
z-index: 3; }
.btn:hover {
cursor: pointer; }
#navbar {
border-bottom: solid 1px black; }
#navbar .dropdown {
position: absolute;
z-index: 3;
display: none;
border-top: none;
padding: 1rem 2rem;
background-color: rgba(0, 0, 0, 0.801);
left: -1.8rem;
top: 3.7rem; }
#navbar .dropdown p {
color: white; }
#navbar .dropdown p:hover {
border-bottom: 1px solid white; }
#navbar .flex-element:hover .dropdown {
display: block;
z-index: 2; }
#navbar .flex-1 {
width: 3rem;
height: 3rem;
margin-left: .5rem;
align-self: center;
padding: .3rem;
font-size: 2rem; }
#navbar .flex-2 {
padding: .3rem;
font-size: 2rem;
margin-right: 5rem; }
#navbar .flex-2 a {
text-decoration: none;
color: black; }
#navbar .flex-element {
padding: .3rem;
font-size: 2rem;
margin-right: 5rem;
transition: all .2s ease-out;
position: relative; }
#navbar .flex-element a {
text-decoration: none;
color: black; }
#navbar .flex-element:first-child {
margin-right: 0; }
#navbar .flex-element:hover {
transform: translateY(1.5px); }
#navbar .flex-element:active {
transform: translateY(-1.5px); }
#font-face {
font-family: 'Proxima Nova';
src: url("../proxima_ssv/Proxima Nova Thin.otf") format("opentype"); }
*,
*::after,
*::before {
margin: 0;
padding: 0;
box-sizing: inherit; }
html {
font-size: 62.5%;
scroll-behavior: smooth; }
body {
font-family: 'Proxima Nova', sans-serif;
line-height: 1.6;
color: black;
box-sizing: border-box; }
.push {
margin-left: auto; }
.line {
background-color: #C6C6C6;
border: solid .1rem #C6C6C6;
max-width: 960px; }
#navbar{
position: relative;
z-index: 1;
}
#hero-img {
position: relative;
/*background: linear-gradient(to top, black 0%, rgba(0, 0, 0, 0.5) 0%), url("../images/hero image.jpg") no-repeat top;*/
background-color:darkgreen;
height: calc(100vh - 3.8rem);
/* - vyska nav baru*/
background-size: cover;
}
.text-box {
position: absolute;
top: 30%;
left: 50%;
transform: translate(-50%, 40%);
backface-visibility: hidden;
text-transform: uppercase;
text-align: left; }
.text-box h1 {
line-height: 1; }
.text-box--main {
display: inline-block;
font-size: 4rem;
color: white;
animation: moveInLeft 1.5s ease-out; }
.text-box--sub {
display: inline-block;
color: white;
font-size: 6.5rem;
animation: moveInRight 1.5s ease-out; }
.flex {
display: flex;
flex-wrap: wrap; }
<nav id="navbar" class="flex">
<div class="flex-1 "></div>
<div class="flex-2 ">falco's woodwork.</div>
<div class="flex-3 flex-element push">
domů
</div>
<div class="flex-4 flex-element">
nabídka
<div class="dropdown">
<p>motýlci</p>
<p>dekorace</p>
<p>ostatní</p>
</div>
</div>
<div class="flex-5 flex-element">
kontakt
</div>
<div class="flex-6 flex-element">
nákup
</div>
</nav>
<div id="hero-img">
<div class="text-box">
<h1>
<span class="text-box--main">objevte krásu</span>
<br>
<span class="text-box--sub">ručně tvořených výrobků</span>
<br>
</h1>
</div>
<button class="btn">theButtonThatDoesntWork</button>
</div>