html - 如何将一个div放在另一个div之上

Question

我试图将一个带有文本的 div 放在一个包含图片元素的 div 上。我似乎无法找到解决当前问题的方法。您可以看到一个包装器 div 以及包含带有图像和文本的 div 的包装器。我的想法是文本将覆盖图像而不是卡在图像下方。

  

body {
    margin: 0 auto;
    padding: 0 auto;
}
    
.wrapper {
    position: relative;
}
    
.wrapper__figure {
    position: absolute;
    margin: 0;
}


.wrapper__content {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

img {
    max-width: 100%;
    height: auto;
}

.inner {
    position: relative;
}

<div class="wrapper" style="color: #000;border-color: #ffffff;">
  <figure class="wrapper__figure">
    <div class="wrapper__figure__content">
      <picture>
        <img id="hero-image" style="object-fit: cover;" src="http://via.placeholder.com/1920x800">
      </picture>
    </div>
  </figure>
  <div class="overlay"></div>
  <div class="wrapper__content">
    <div class="inner">
      <div class="columns">
        <div class="column1-3">

          <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur aliquet quam id dui posuere blandit. Pellentesque in ipsum id orci porta dapibus. Pellentesque in ipsum id orci porta dapibus. Quisque velit nisi, pretium ut lacinia
            in, elementum id enim.</p>

        </div>
        <div class="column1-3">

          <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur aliquet quam id dui posuere blandit. Pellentesque in ipsum id orci porta dapibus. Pellentesque in ipsum id orci porta dapibus. Quisque velit nisi, pretium ut lacinia
            in, elementum id enim.</p>

        </div>
        <div class="column1-3">

          <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur aliquet quam id dui posuere blandit. Pellentesque in ipsum id orci porta dapibus. Pellentesque in ipsum id orci porta dapibus. Quisque velit nisi, pretium ut lacinia
            in, elementum id enim.</p>

        </div>
      </div>
    </div>
  </div>
</div>
<div class="wrapper" style="
																			color: #000;
																			border-color: #ffffff;
																	">
  <figure class="wrapper__figure">
    <div class="wrapper__figure__content">
      <picture>
        <img id="hero-image" style="object-fit: cover;" src="http://via.placeholder.com/1920x800">
      </picture>
    </div>
  </figure>
  <div class="overlay"></div>
  <div class="wrapper__content">
    <div class="inner">
      <div class="columns">
        <div class="column1-3">

          <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur aliquet quam id dui posuere blandit. Pellentesque in ipsum id orci porta dapibus. Pellentesque in ipsum id orci porta dapibus. Quisque velit nisi, pretium ut lacinia
            in, elementum id enim.</p>

        </div>
        <div class="column1-3">

          <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur aliquet quam id dui posuere blandit. Pellentesque in ipsum id orci porta dapibus. Pellentesque in ipsum id orci porta dapibus. Quisque velit nisi, pretium ut lacinia
            in, elementum id enim.</p>

        </div>
        <div class="column1-3">

          <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur aliquet quam id dui posuere blandit. Pellentesque in ipsum id orci porta dapibus. Pellentesque in ipsum id orci porta dapibus. Quisque velit nisi, pretium ut lacinia
            in, elementum id enim.</p>

        </div>
      </div>
    </div>
  </div>
</div>

@TylerH 感谢您对我的帖子进行编辑，并指出我没有使用已编译的 css。

我现在遇到了一个新问题。现在我的代码正在运行，我试图在它下面添加一个新的包装器，但是这样做时第二个包装器在第一个包装器下面。我希望获得的东西是 2 张图像。我自己似乎没有找到任何解决方案。

Answer 1

你写错了类。要么按照我现在写的方式去做，要么将 &__content 添加到 .wrapper

.wrapper {
  position: relative;
  &__figure {
    position: absolute;
    margin: 0;
  }
}

img {
  max-width: 100%;
  height: auto;
}

.wrapper__content {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
}

.overlay {
  background-color: #333;
  opacity: 0.65;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

.inner {
  position: relative;
}

<div class="wrapper" style="
																			color: #000;
																			border-color: #ffffff;
																	">
  <figure class="wrapper__figure">
    <div class="wrapper__figure__content">
      <picture>
        <img id="hero-image" style="object-fit: cover;" src="http://via.placeholder.com/1920x800">
      </picture>
    </div>
  </figure>
  <div class="overlay"></div>
  <div class="wrapper__content">
    <div class="inner">
      <div class="columns">
        <div class="column1-3">

          <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur aliquet quam id dui posuere blandit. Pellentesque in ipsum id orci porta dapibus. Pellentesque in ipsum id orci porta dapibus. Quisque velit nisi, pretium ut lacinia
            in, elementum id enim.</p>

        </div>
        <div class="column1-3">

          <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur aliquet quam id dui posuere blandit. Pellentesque in ipsum id orci porta dapibus. Pellentesque in ipsum id orci porta dapibus. Quisque velit nisi, pretium ut lacinia
            in, elementum id enim.</p>

        </div>
        <div class="column1-3">

          <p>Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Curabitur aliquet quam id dui posuere blandit. Pellentesque in ipsum id orci porta dapibus. Pellentesque in ipsum id orci porta dapibus. Quisque velit nisi, pretium ut lacinia
            in, elementum id enim.</p>

        </div>
      </div>
    </div>
  </div>
</div>