为什么一个按钮在CSS的任何一层都不起作用？

Question

我很难理解为什么按钮在英雄图片的样式中不起作用。我已经尝试添加一个 z-index 以将其置于顶部，但没有任何理由阻止此按钮。

我试过将此按钮放在其他元素之一中，但似乎没有任何东西可以让该按钮起作用。

#hero {
 background-image: url('https://picsum.photos/1900/1000');
 background-size: cover;
 background-position: top center;
 position: relative;
 top: 0;
 bottom: 0;
 height: 85vh;
 z-index: -10;
}

#hero-overlay {
 position: absolute;
 background-color: rgba(0,0,0,0.5);
 top: 0;
 bottom: 0;
 height: 100%;
 width: 100%;
 z-index: -5;
}

#hero-title {
 text-align: center;
 position: relative;
 text-transform: uppercase;
}


h1, #impact, #through, #diversity {
 font-weight: 700;
 line-height: .5;
}

#hero-subtitle ul {
 margin: 1.5rem 0;
}


@media (min-width: 320px) {
 h1#impact {
  color: #ffffff;
  font-size: 3em;
 }

 h1#through {
  color: rgb(235,234,229, .36);
  font-size: 3.5em;
  
  /* Fix for Safari */
  -khtml-opacity: 0.36;
 }

 h1#diversity {
  color: rgb(240,78,35);
  font-size: 3em;
 }
 
 #hero-subtitle ul li {
  list-style: none;
  color: #ffffff;
  text-align: center;
  text-transform: none;
  display: block;
 }

 #hero-subtitle ul {
  padding: 0;
 }
 
 h1.display-4 {
  font-size: 1.5em;
 }
 
}

@media (min-width: 360px) {
 h1#impact {
  color: #ffffff;
  font-size: 3.5em;
 }

 h1#through {
  color: rgb(235,234,229, .36);
  font-size: 4em;
  
  /* Fix for Safari */
  -khtml-opacity: 0.36;  
 }

 h1#diversity {
  color: rgb(240,78,35);
  font-size: 3.5em;
 }
 
 #hero-subtitle ul li {
  list-style: none;
  color: #ffffff;
  text-align: center;
  text-transform: none;
  display: block;
 }

 #hero-subtitle ul {
  padding: 0;
 }
}


@media (min-width: 480px) {
 h1#impact {
  color: #ffffff;
  font-size: 4.5em;
 }

 h1#through {
  color: rgb(235,234,229, .36);
  font-size: 5em;
 }

 h1#diversity {
  color: rgb(240,78,35);
  font-size: 4.5em;
 }
 
 #hero-subtitle ul li {
  list-style: none;
  color: #ffffff;
  text-align: center;
  text-transform: none;
  display: inline;
 }
 
 #hero-subtitle li+li:before {
  content: '| ';
  color: #f04e23;
 } 

 #hero-subtitle ul {
  padding: 0;
 }
}

@media (min-width: 640px) {
 h1#impact {
  color: #ffffff;
  font-size: 5.5em;
 }

 h1#through {
  color: rgb(235,234,229, .36);
  font-size: 6.5em;
 }

 h1#diversity {
  color: rgb(240,78,35);
  font-size: 5.5em;
 }
 
 #hero-subtitle ul li {
  list-style: none;
  color: #ffffff;
  text-align: center;
  text-transform: none;
  display: inline;
 }
 
 #hero-subtitle li+li:before {
  content: '| ';
  color: #f04e23;
 } 

 #hero-subtitle ul {
  padding: 0;
 }
 
 #hero-title {
  margin-top: 3em; 
 } 
}

@media (min-width: 768px) {
 h1#impact {
  color: #ffffff;
  font-size: 6.5em;
 }

 h1#through {
  color: rgb(235,234,229, .36);
  font-size: 7.5em;
 }

 h1#diversity {
  color: rgb(240,78,35);
  font-size: 6.5em;
 }
 
 #hero-subtitle ul li {
  list-style: none;
  color: #ffffff;
  text-align: center;
  text-transform: none;
  display: inline;
  font-size: 1.3em;
 }
 
 #hero-subtitle li+li:before {
  content: '| ';
  color: #f04e23;
 } 

 #hero-subtitle ul {
  padding: 0;
 }

 #hero-title {
  margin-top: 3em; 
 }
 
 h1.display-4 {
  font-size: 2em;
 } 
}


@media (min-width: 992px) {
 h1#impact {
  color: #ffffff;
  font-size: 8em;
 }

 h1#through {
  color: rgb(235,234,229, .36);
  font-size: 9.5em;
 }

 h1#diversity {
  color: rgb(240,78,35);
  font-size: 8em;
 }

 #hero-subtitle ul li {
  list-style: none;
  color: #ffffff;
  text-align: center;
  text-transform: none;
  display: inline;
  font-size: 1.5em;
 }

 #hero-subtitle li+li:before {
  content: '| ';
  color: #f04e23;
 } 
 
}

.center {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.btn-top {
  z-index: 1000!important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>

<!-- HTML here -->
<main role="main">
  <div id="hero">
    <div id="hero-overlay"></div>
    <div class="center" id="hero-title">
      <h1 id="impact">Title 1</h1>
      <h1 id="through">Title 2</h1>
      <h1 id="diversity">Title 3</h1>
      <div id="hero-subtitle">
        <ul>
          <li>Conference Name</li>
          <li>February 27-March 1</li>
          <li>City, ST</li>
        </ul>
      </div>
      <a class="btn btn-lg btn-primary btn-top" href="#">Register</a>
    </div>
  </div> 
</main>

Answer 1

您的 #hero 元素有一个 z-index: -10;，有效地将其放置在页面下方，按钮变得无响应。将其设置为零可以解决这个问题。

Answer 2

将 #hero 上的 z-index 更改为 1 应该可以解决问题。

#hero {
 background-image: url('https://picsum.photos/1900/1000');
 background-size: cover;
 background-position: top center;
 position: relative;
 top: 0;
 bottom: 0;
 height: 85vh;
 z-index: 1;
}

#hero-overlay {
 position: absolute;
 background-color: rgba(0,0,0,0.5);
 top: 0;
 bottom: 0;
 height: 100%;
 width: 100%;
 z-index: -5;
}

#hero-title {
 text-align: center;
 position: relative;
 text-transform: uppercase;
}


h1, #impact, #through, #diversity {
 font-weight: 700;
 line-height: .5;
}

#hero-subtitle ul {
 margin: 1.5rem 0;
}


@media (min-width: 320px) {
 h1#impact {
  color: #ffffff;
  font-size: 3em;
 }

 h1#through {
  color: rgb(235,234,229, .36);
  font-size: 3.5em;
  
  /* Fix for Safari */
  -khtml-opacity: 0.36;
 }

 h1#diversity {
  color: rgb(240,78,35);
  font-size: 3em;
 }
 
 #hero-subtitle ul li {
  list-style: none;
  color: #ffffff;
  text-align: center;
  text-transform: none;
  display: block;
 }

 #hero-subtitle ul {
  padding: 0;
 }
 
 h1.display-4 {
  font-size: 1.5em;
 }
 
}

@media (min-width: 360px) {
 h1#impact {
  color: #ffffff;
  font-size: 3.5em;
 }

 h1#through {
  color: rgb(235,234,229, .36);
  font-size: 4em;
  
  /* Fix for Safari */
  -khtml-opacity: 0.36;  
 }

 h1#diversity {
  color: rgb(240,78,35);
  font-size: 3.5em;
 }
 
 #hero-subtitle ul li {
  list-style: none;
  color: #ffffff;
  text-align: center;
  text-transform: none;
  display: block;
 }

 #hero-subtitle ul {
  padding: 0;
 }
}


@media (min-width: 480px) {
 h1#impact {
  color: #ffffff;
  font-size: 4.5em;
 }

 h1#through {
  color: rgb(235,234,229, .36);
  font-size: 5em;
 }

 h1#diversity {
  color: rgb(240,78,35);
  font-size: 4.5em;
 }
 
 #hero-subtitle ul li {
  list-style: none;
  color: #ffffff;
  text-align: center;
  text-transform: none;
  display: inline;
 }
 
 #hero-subtitle li+li:before {
  content: '| ';
  color: #f04e23;
 } 

 #hero-subtitle ul {
  padding: 0;
 }
}

@media (min-width: 640px) {
 h1#impact {
  color: #ffffff;
  font-size: 5.5em;
 }

 h1#through {
  color: rgb(235,234,229, .36);
  font-size: 6.5em;
 }

 h1#diversity {
  color: rgb(240,78,35);
  font-size: 5.5em;
 }
 
 #hero-subtitle ul li {
  list-style: none;
  color: #ffffff;
  text-align: center;
  text-transform: none;
  display: inline;
 }
 
 #hero-subtitle li+li:before {
  content: '| ';
  color: #f04e23;
 } 

 #hero-subtitle ul {
  padding: 0;
 }
 
 #hero-title {
  margin-top: 3em; 
 } 
}

@media (min-width: 768px) {
 h1#impact {
  color: #ffffff;
  font-size: 6.5em;
 }

 h1#through {
  color: rgb(235,234,229, .36);
  font-size: 7.5em;
 }

 h1#diversity {
  color: rgb(240,78,35);
  font-size: 6.5em;
 }
 
 #hero-subtitle ul li {
  list-style: none;
  color: #ffffff;
  text-align: center;
  text-transform: none;
  display: inline;
  font-size: 1.3em;
 }
 
 #hero-subtitle li+li:before {
  content: '| ';
  color: #f04e23;
 } 

 #hero-subtitle ul {
  padding: 0;
 }

 #hero-title {
  margin-top: 3em; 
 }
 
 h1.display-4 {
  font-size: 2em;
 } 
}


@media (min-width: 992px) {
 h1#impact {
  color: #ffffff;
  font-size: 8em;
 }

 h1#through {
  color: rgb(235,234,229, .36);
  font-size: 9.5em;
 }

 h1#diversity {
  color: rgb(240,78,35);
  font-size: 8em;
 }

 #hero-subtitle ul li {
  list-style: none;
  color: #ffffff;
  text-align: center;
  text-transform: none;
  display: inline;
  font-size: 1.5em;
 }

 #hero-subtitle li+li:before {
  content: '| ';
  color: #f04e23;
 } 
 
}

.center {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.btn-top {
  z-index: 1000!important;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"></script>

<!-- HTML here -->
<main role="main">
  <div id="hero">
    <div id="hero-overlay"></div>
    <div class="center" id="hero-title">
      <h1 id="impact">Title 1</h1>
      <h1 id="through">Title 2</h1>
      <h1 id="diversity">Title 3</h1>
      <div id="hero-subtitle">
        <ul>
          <li>Conference Name</li>
          <li>February 27-March 1</li>
          <li>City, ST</li>
        </ul>
      </div>
      <a class="btn btn-lg btn-primary btn-top" href="#">Register</a>
    </div>
  </div> 
</main>

为什么一个按钮在CSS的任何一层都不起作用？

Why a button doesn't work in any layer of CSS?

html

css

z-index

bootstrap-4