下拉菜单隐藏在我的英雄 img 后面

Question

我的主图有问题，即使我在菜单上设置了更高的 z-index，它也总是隐藏我的下拉菜单。我已经找到了一个“解决方案”，我给了英雄形象 z-index:-1，但现在我在英雄形象上的按钮不起作用。我想在没有任何变通办法的情况下完成这项工作。

jsfiddle here（此处下拉菜单有效，因为#hero-img 具有 z-index:-1，但顶部按钮不起作用）

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

1) 请帮我找出 z-index > 0 不起作用的原因 + 解决方案，不使用 z-index:0;

2) 额外问题，为什么当我将 hero img 设置为负 z-index 时按钮不起作用，即使我有 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

从#hero-img 中删除z-index: -1; 并添加这些行可以解决您的问题。

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

最初发生的情况是，#hero-img 上的 position: relative 隐藏了您的下拉菜单。因为位置方面的#hero-img 高于#navbar。这就是为什么您还应该在#navbar 中添加z-index。

并且您给了负的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>