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

Question

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

CSS(div 和 img)

.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;
}

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