Button overlapping header - html

Question

The header I've made keeps getting overlapped by the button that I placed in front of the image.
Before
After
I feel like this is happening due to the outer_header position: fixed but I cannot seem to find an alternative that will allow it to overlap the button. And I am not sure why it doesn't overlap the other content.
My assumption is that its because the button's position is absolute but I need that to be able to move to the button on top of the image.
.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

You should add a z-index to your header
.header {
background-color: #333;
position: sticky;
top:0;
z-index: 10;
}
and if that doesn't work, also add a lower z-index to #Banner_btn, eg:
#Banner_btn { z-index: 5; }