html：在粘性导航栏上重叠图片答案

【问题标题】：html: overlapping picture over sticky navbarhtml：在粘性导航栏上重叠图片
【发布时间】：2017-12-01 19:52:59
【问题描述】：

我需要 smbds 的帮助... 我有一个粘性导航栏，最近添加了一个带有一些图片（宽度：100%）的 div，并想在图像中添加一些文本，但是当我这样做时，所有内容都会超出我的粘性导航栏（向下滚动时），它在下面（隐藏）这个 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%);}

【问题讨论】：

标签： html css navbar

【解决方案1】：

为您的粘性元素设置z-index。

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

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

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

【讨论】：