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

Question

我很难理解为什么按钮在英雄图像的样式中不起作用。我尝试添加一个 z 索引以将其置于顶部，但没有任何意义为什么这个按钮被阻止。

我尝试将此按钮放在其他元素之一中，但似乎没有什么允许该按钮工作。

#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>