Заголовок перекрытия кнопок

Question

Заголовок, который я сделал, продолжает перекрываться кнопкой, которую я поместил перед изображением.

До

После

Мне кажется, что это происходит из-за позиции external_header: исправлено, но я не могу найти альтернативу, которая позволила бы ей перекрывать кнопку. И я не уверен, почему он не перекрывает другой контент.

Я предполагаю, что это потому, что положение кнопки является абсолютным, но мне нужно, чтобы я мог перейти к кнопке в верхней части изображения.

.outer_header {
	position: fixed;
	width: 98%;
	padding:20px;
	top:0;
	background-color: #e6c300;
}

.header {
	background-color: #333;
	position: sticky;
	top:0;
}

.header * {
	display: inline;
}

.active{
	background-color: grey;
}

.Navigation a{
	border-style: solid;
  	border-color:grey;
  	background-clip: padding-box;
  	background-color: grey;
	display: inline-block;
	color:white;
	text-decoration: none;
	text-align: center;
}
.Navigation a:hover {
	background-color: #ddd;
	color: black;
	border-color:black;
}

#search_bar {
	padding:6px;
	margin-top: 8px;
  	font-size: 15px;
  	border: none;
}

.search-icon, .add_cart{
	padding: 6px 10px;
 	margin-top: 8px;
  	margin-right: 16px;
  	background: #ddd;
  	font-size: 15px;
 	border: none;
  	cursor: pointer;
}

.add_cart {
  	background: black;
}

#banner {
	width: 100%;
	padding-top: 90px;
}


#Banner_btn {
	position: absolute;
  top: 70%;
 	left: 78.25%;
 	transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  background-color: white;
  color: black;
  font-size: 25px;
  padding: 24px 16px 24px 16px;
  border: 2px solid grey;
  cursor: pointer;

}

#Banner_btn:hover {
	background-color: #bfbfbf;
}

Answer 1

Вы должны добавить z-index в свой заголовок

.header {
  background-color: #333;
  position: sticky;
  top:0;
  z-index: 10;
}

и, если это не сработает, также добавить нижний z-index к #Banner_btn, например:

#Banner_btn { z-index: 5; }