title: How to not overlap the banner with text and images in HTML/CSS?
body: <p>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.</p>
  <p>The banner I am talking about is where it says &quot;Hi there! Thanks for.....&quot; 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 <code>assets/css/banner.css</code> 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.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> (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);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@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;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="exponea-banner"&gt;
    &lt;div class="exponea-close"&gt;
      &amp;times;
    &lt;/div&gt;
    &lt;div class="exponea-text"&gt;
      Hi there! Thanks for stumbling upon my website!
    &lt;/div&gt;
    &lt;div class="exponea-label"&gt;
      - Hussain Omer
    &lt;/div&gt;
    &lt;div class="exponea-label2"&gt;
      (scroll down a bit to close this banner) &amp;#128515
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Thanks in advance!</p>