html:在粘性导航栏上重叠图片

Question

我需要 smbds 帮助...我有一个粘性导航栏，最近添加了一个带有一些图片的 div(宽度:100%)，并想在图像中添加一些文本，但是当我这样做时，所有内容都超过了我的粘性导航栏(向下滚动时)，它位于(隐藏)这个 div(带有图片)，但我希望它始终位于顶部(我的导航栏)...(我知道位置有问题，但尝试了很多东西...)。

CSS(带有 img 的 div)

.container {
    display:inline-block;
    position:relative;
    text-align: center;
    color: white;}

CSS(图片中带有我的文字的 DIV)

.centered {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);}

Answer 1

为粘性元素设置 z-index。

如果你的绝对定位元素没有明确的z-index，你可以设置z-index = 1;，例如:

.sticky-element {
   position: sticky;
   top: 10; // or whatever you have
   z-index: 1;
}

但是，我不知道为什么浏览器会这样。