CODEWITHSUNDEEP
htmlcss
Ahsan1999
Ahsan1999

Reputation: 37

Button overlapping header

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;
}

Upvotes: 0

Views: 1001

Answers (1)

Victor Ivanov
Victor Ivanov

Reputation: 126

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; }

Upvotes: 2

Related Questions