如何在英雄图像上覆盖透明导航栏，并在英雄图像上有功能正常的按钮？

Question

I've set my nav bar as transparent on top of my hero image, however, the buttons on my hero image do not work.

The nav-bar has a z-index of 1, and my hero image, text and button has a z-index of -1. This makes the button unclickable, as it is set to be behind the navbar.

Things I've tried:

-I've tried to give my button a z-index of 1, but it doesn't work

-I've tried to wrap my button in a div class and set the z-index of that to 1, but it doesn't work

-If I reverse the z-index of the nav bar and hero image, the buttons work, however, the nav bar is set behind the image and cannot be seen.

How do I accomplish having the nav bar on top of the hero image AND have my button clickable?

 .top-nav{ font-size: 20px; margin-top:0em; margin-bottom:0em; font-weight:600; padding: 0px 32px; color: white !important; background: transparent; } .navbar-overlay { position:relative; margin-bottom: -104px; z-index: 1; } .first-section-hero { position: relative; min-height: auto; height:900px; margin-top: 0em; padding-bottom: 10em; background-image:url("{% static 'img/yellow_swoosh.svg' %}"); background-position: center center; -webkit-background-size: cover; -moz-background-size: cover; background-size: cover; -o-background-size: cover; background-repeat:no-repeat; z-index: -1; } 

 <section class="top-nav "> <div class= navbar-overlay > <nav class="navbar navbar-expand-lg navbar-dark "> <a class="navbar-brand" href="{{ home_url }}">Name</a> <div class="collapse navbar-collapse " id="navbarText"> <ul class="navbar-nav mx-auto"> <li class="nav-item "> <a class="nav-link" href="/articles">Resources</a> </li> <li class="nav-item"> <a class="nav-link" href="/features">Features</a> </li> <li class="nav-item"> <a class="nav-link" href="/about">About </a> </li> </ul> </div> </nav> </div> </section> <section class="first-section-hero" > <div class="container"> <div class="row"> <div class="col-lg-12 col-xs-12 "> <h1>TITLE</h1> <a href="#" class="btn btn-default btn-xl">FIND OUT MORE</a> </div> </div> </div> </section> 

Answer 1

您的Z索引应大于与按钮重叠的导航栏。

Answer 2

Just set z-index like

.image {
  z-index : 1000;
}
.navbar {
  z-index : 1001;
}

.buttons {
  z-index : 1002;
}

and your problem will solve