I have created a banner for my project, and for some reason, the banner seems to be overlapping with text and images as it hides behind them. How would I fix this? I am going to share the link to my project as I can't post it here since there is a lot of other files.
The banner I am talking about is where it says "Hi there! Thanks for....." in the bottom right corner. Also, I want to make it come in front of everything like it shouldn't hide behind any images or text. Please help as I cannot get this be fixed. The css of the banner is located in assets/css/banner.css The html of the banner is located near the top of the HTML file. But I will also paste the code here since there might be something I am missing and need to add so that it doesn't overlap with anything.
(function() {
requestAnimationFrame(function() {
var banner;
banner = document.querySelector('.exponea-banner');
banner.classList.add('exponea-in');
return banner.querySelector('.exponea-close').addEventListener('click', function() {
return banner.classList.remove('exponea-in');
});
});
}).call(this);@import url("https://fonts.googleapis.com/css?family=Roboto:300,400,500");
html,
body {
width: 100vw;
height: 100vh;
position: relative;
}
.exponea-banner {
font-family: Roboto, sans-serif;
position: fixed;
right: 20px;
bottom: 20px;
background-color: #2e364d;
color: #ebeef7;
padding: 30px 80px 30px 35px;
font-size: 16px;
line-height: 1;
border-radius: 5px;
box-shadow: 0 3px 30px rgba(116, 119, 176, 0.3);
opacity: 0;
transition: opacity 0.2s;
}
.exponea-banner.exponea-in {
opacity: 1;
transition-duration: 0.4s;
}
.exponea-banner .exponea-close {
position: absolute;
top: 0;
right: 0;
padding: 5px 10px;
font-size: 25px;
font-weight: 300;
cursor: pointer;
opacity: 0.75;
}
.exponea-banner .exponea-label {
position: absolute;
bottom: 10px;
right: 10px;
font-size: 12px;
opacity: 0.75;
}
.exponea-banner .exponea-text {
margin-bottom: 8px;
}
.exponea-banner .exponea-count {
font-weight: 500;
}
.exponea-banner .exponea-label {
text-align: left;
bottom: 10px;
right: 10px;
font-size: 12px;
opacity: 0.75;
}