Javascript 如何在HTML/CSS中避免横幅与文本和图像重叠？

因此，我为我的项目创建了一个横幅，出于某种原因，横幅似乎与隐藏在后面的文本和图像重叠。我该如何解决这个问题？我将分享我的项目链接，因为我不能在这里发布，因为还有很多其他文件

我所说的横幅在右下角写着“你好！谢谢你……”。另外，我想让它出现在所有东西的前面，就像它不应该隐藏在任何图像或文本后面一样。请帮助我，因为我无法解决这个问题。横幅的css位于

assets/css/banner.css

横幅的html位于html文件的顶部附近。但我也会将代码粘贴到这里，因为我可能缺少一些东西，需要添加一些东西，这样就不会与任何东西重叠

（函数（）{
requestAnimationFrame（函数（）{
瓦尔旗；
banner=document.querySelector（'.exponea banner'）；
banner.classList.add（'exponea-in'）；
return banner.querySelector（'.exponea close'）.addEventListener（'click'，function（）{
return banner.classList.remove（'exponea-in'）；
});
});
}).打电话（这个）
@导入url（“https://fonts.googleapis.com/css?family=Roboto:300,400,500");
html，
身体{
宽度：100vw；
高度：100vh；
位置：相对位置；
}
埃博尼亚旗帜酒店{
字体系列：Roboto，无衬线；
位置：固定；
右：20px；
底部：20px；
背景色：#2e364d；
颜色：#ebeef7；
填充：30px 80px 30px 35px；
字体大小：16px；
线高：1；
边界半径：5px；
盒影：0 3px 30px rgba（116、119、176、0.3）；
不透明度：0；
过渡：不透明度0.2s；
}
.exponea-banner.exponea-in{
不透明度：1；
过渡时间：0.4s；
}
.exponea旗帜，exponea关闭{
位置：绝对位置；
排名：0；
右：0；
填充物：5px10px；
字体大小：25px；
字体大小：300；
光标：指针；
不透明度：0.75；
}
.exponea旗帜.exponea标签{
位置：绝对位置；
底部：10px；
右：10px；
字体大小：12px；
不透明度：0.75；
}
.exponea横幅.exponea文本{
边缘底部：8px；
}
.exponea旗帜，exponea计数{
字号：500；
}
.exponea旗帜.exponea标签{
文本对齐：左对齐；
底部：10px；
右：10px；
字体大小：12px；
不透明度：0.75；
}

&时代；
你好！谢谢你访问我的网站！
-侯赛因·奥马尔
（向下滚动一点以关闭此横幅）😃
使用
z-index
。例如，在CSS中尝试以下操作：

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

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