CODEWITHSUNDEEP
javascripthtmlcsswebweb-deployment
user14945402
user14945402

Reputation:

How to not overlap the banner with text and images in HTML/CSS?

so 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;
}
<div class="exponea-banner">
  <div class="exponea-close">
    &times;
  </div>
  <div class="exponea-text">
    Hi there! Thanks for stumbling upon my website!
  </div>
  <div class="exponea-label">
    - Hussain Omer
  </div>
  <div class="exponea-label2">
    (scroll down a bit to close this banner) &#128515
  </div>
</div>

Thanks in advance!

Upvotes: 2

Views: 526

Answers (1)

VorganHaze
VorganHaze

Reputation: 2066

Use z-index. For example, try this in your CSS:

.exponea-banner,
.exponea-close,
.exponea-text,
.exponea-label,
.exponea-label2 {
    z-index: 10;
}

Remember that the z-index property controls the vertical stacking order of elements that overlap. Using a high number (like 10) you are making sure that this elements stay on top of the others in you page.

Upvotes: 1

Related Questions