title: Why a button doesn't work in any layer of CSS?
body: <p>I'm having a hard time understanding why a button doesn't work within the styles of a hero image. I've tried adding a z-index to bring it to the top, but nothing is making sense why this button is being blocked.</p>
  
  <p>I've tried putting this button within one of the other elements, and nothing seems to be allowing the button to work. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.bundle.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- HTML here --&gt;
  &lt;main role="main"&gt;
    &lt;div id="hero"&gt;
      &lt;div id="hero-overlay"&gt;&lt;/div&gt;
      &lt;div class="center" id="hero-title"&gt;
        &lt;h1 id="impact"&gt;Title 1&lt;/h1&gt;
        &lt;h1 id="through"&gt;Title 2&lt;/h1&gt;
        &lt;h1 id="diversity"&gt;Title 3&lt;/h1&gt;
        &lt;div id="hero-subtitle"&gt;
          &lt;ul&gt;
            &lt;li&gt;Conference Name&lt;/li&gt;
            &lt;li&gt;February 27-March 1&lt;/li&gt;
            &lt;li&gt;City, ST&lt;/li&gt;
          &lt;/ul&gt;
        &lt;/div&gt;
        &lt;a class="btn btn-lg btn-primary btn-top" href="#"&gt;Register&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt; 
  &lt;/main&gt;</code></pre>
  </div>
  </div>
  </p>