Question

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

我现在遇到了一个新问题。现在我的代码工作了，我试图在它下面添加一个新的包装器，但是当这样做时，第二个包装器在第一个包装器下面。我希望获得的东西是2张图片。我自己似乎找不到任何解决办法。

Answer 1

你写错了。要么就像我现在写的那样，要么将＆amp; __ content添加到.wrapper

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

如果你想让包装器div包含文本div（wrapper_content），为什么不只是让包装器图像成为背景图像，并将wrapper_content div放在顶部，使用绝对位置或显示flex - justify-content-center /对齐项中心。像这样：

.wrapper {

   background-image: url('http://via.placeholder.com/1920x800');
   background-size: auto;
   background-repeat: no-repeat;

}

.wrapper_content {

   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);

}

或者就像我说的那样使用display：flex并使用justify-content-center / align-items-center将wrapper_content置于包装器（background-image）的中心。

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

2 个答案: