【问题标题】: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;
    }
    

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

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-11-02
      • 1970-01-01
      • 2014-04-27
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多