CSS 对齐 - 覆盖下一个 div

Question

我在一个页面上有两个 div - 一个图像和一些文本。图像设置为 100% 宽度，因此文本堆叠在其下方。没有设置位置。

然后我在图像顶部添加了一个标题，为容器 div 指定了相对位置，为图像和标题指定了绝对位置。

这导致图像下方的文字消失在图像后面。为什么？!？!我是 CSS 的新手，无法弄清楚这些对齐方式。

CSS:

    .fullwidthimage {
    width: 100%;
    position: relative;
    float: left;
}
.imageoverlay {
    left: 0;
    text-align: center;
    position: absolute;
    z-index: 100;
    top: 50px;
    width: 100%;
    }
    .imageundertext {
        position:  absolute;
    }

jsfiddle 在这里:https://jsfiddle.net/4ksbz4c2/

谢谢。

Answer 1

在您的 CSS 中使用“z-index”。

如果图像是固定的，我会将其设置为背景图像。

https://jsfiddle.net/4ksbz4c2/1/

.fullwidthimage {
  height:100vh;
  width:100vw;
  position:fixed;
  top:0;
  left:0;
  z-index:-1;
  text-align:center;
}

.fullwidthimage img {
  z-index:-1;
  position:fixed;
  top:0;
  left:0;
}
.fullwidthimage h1 {
  z-index:1;
}