如何在 HTML/CSS 中不让横幅与文字和图像重叠？

Question

所以我为我的项目创建了一个横幅，由于某种原因，横幅似乎与文本和图像重叠，因为它隐藏在它们后面。我将如何解决这个问题？我将 link 分享到我的项目，因为我不能在这里 post 因为有很多其他文件。

我说的横幅是在右下角写着“你好！谢谢......”的地方。另外，我想让它出现在所有内容的前面，就像它不应该隐藏在任何图像或文本后面一样。请帮忙，因为我无法解决这个问题。横幅的 css 位于 assets/css/banner.css 横幅的 html 位于 HTML 文件顶部附近。但我也会在这里粘贴代码，因为可能有一些我遗漏的东西需要添加，这样它就不会与任何东西重叠。

 (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>

提前致谢！

Answer 1

使用z-index。例如，在 CSS:

中试试这个

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

请记住，z-index 属性控制重叠元素的垂直堆叠顺序。使用较大的数字（如 10）可以确保此元素位于页面中其他元素的顶部。

如何在 HTML/CSS 中不让横幅与文字和图像重叠？

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

html

javascript

css

web-deployment

web