выпадающее меню скрыто за моим героем img

Question

У меня проблема с изображением героя, оно всегда скрывает мое выпадающее меню, даже если я поместил в меню более высокий z-индекс. Я нашел «решение» для этого, я дал z-index изображения героя: -1, но теперь моя кнопка на изображении героя не работает. Я хочу использовать эту работу без каких-либо обходных путей.

jsfiddle здесь (здесь выпадающий список работает, потому что # hero-img имеет z-index: -1, но верхняя кнопка не работает)

https://jsfiddle.net/xLo7wcph/1/

1), пожалуйста, помогите мне найти причину, по которой z-index> 0 не работает + решение для этого, без использования z-index: 0;

2) бонусный вопрос, почему кнопка не работает, когда я устанавливаю img hero на отрицательный z-индекс, даже если у меня btn z-index: 1;

   <nav id="navbar" class="flex">
            <div class="flex-1 "><img src="images/drevo2.svg"></div>
            <div class="flex-2 "><a href="index.html">falco's woodwork.</a></div>
            <div class="flex-3 flex-element push">
                <a href="index.html">domů</a>
            </div>
            <div class="flex-4 flex-element">
                <a href="#categories">nabídka</a>
                <div class="dropdown">
                    <a href="#categories"><p>motýlci</p></a>
                    <a href="#categories"><p>dekorace</p></a>
                    <a href="#categories"><p>ostatní</p></a>
                </div>
            </div>     
            <div class="flex-5 flex-element">
                <a href="#contact">kontakt</a>
            </div>   
            <div class="flex-6 flex-element">
                <a href="https://www.seznam.cz/">nákup</a>
            </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"><a href="#about-us"><img src="images/SIPKA DOLU.svg"></a></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

Удаление z-index: -1; из #hero-img и добавление этих строк решает вашу проблему.

#navbar{
  position: relative;
  z-index: 1;
}

Изначально происходило следующее: position: relative на #hero-img скрывал ваше раскрывающееся меню. потому что с позиции #hero-img был выше, чем #navbar. вот почему вы должны также добавить z-index в #navbar.

И вы дали отрицательное значение z-index, чтобы появилось выпадающее меню. когда вы даете отрицательный z-index элементу, он будет отображаться под другими элементами.

В этом случае #hero-img находился под телом. кнопка не будет отображаться, когда вы дадите высокое значение z-index, потому что ее родительский элемент #hero-img находится под верхним слоем.

рабочая демонстрация:

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 "><a href="index.html">falco's woodwork.</a></div>
  <div class="flex-3 flex-element push">
    <a href="index.html">domů</a>
  </div>
  <div class="flex-4 flex-element">
    <a href="#categories">nabídka</a>
    <div class="dropdown">
      <a href="#categories"><p>motýlci</p></a>
      <a href="#categories"><p>dekorace</p></a>
      <a href="#categories"><p>ostatní</p></a>
    </div>
  </div>
  <div class="flex-5 flex-element">
    <a href="#contact">kontakt</a>
  </div>
  <div class="flex-6 flex-element">
    <a href="https://www.seznam.cz/">nákup</a>
  </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"><a href="#about-us">theButtonThatDoesntWork</a></button>
</div>