html - 为什么按钮在 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>

标签： htmlcssbootstrap-4z-index

Answer 1

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