文本-图像部分顶部的定位叠加问题

Question

我在将覆盖层放置在文本图像部分顶部时遇到问题。我试图在附图中形象化预期的结果。覆盖层（蓝色）应位于顶部，而不覆盖文本。所有文本（在文本图像部分和覆盖层中）都是动态的（长度）。

我最好不使用JS来解决它，但想不出任何可能的解决方案。

使用的堆栈是 PHP、HTML、CSS (SCSS)、JS (jQuery) 和 Bootstrap (v5)。 预期结果

我尝试使用绝对位置和变换来定位覆盖层，但在这两种情况下我都不能保证不覆盖文本。

这就是我现在的 HTML：

<section class="section-image_text">
    <div class="container">
        <div class="row row-image_text">
            <div class="col-12 col-md-6 column-image">
                <div class="image">
                    <img src="/placeholder.jpg" alt="placeholder">
                </div>
            </div>
            <div class="col-12 col-md-6 column-textfield">
                <div class="textfield">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At debitis maiores modi quae quos. Beatae consectetur, dicta harum minima modi perferendis similique soluta tenetur voluptate voluptatum. Ad aperiam architecto beatae commodi dicta est harum numquam quod recusandae suscipit! Aliquam atque delectus dicta eum fugiat id in natus omnis, provident quia reiciendis reprehenderit tempore ut? Accusantium alias aliquid amet blanditiis commodi consectetur consequatur cumque delectus distinctio, doloremque eaque et, excepturi hic illo incidunt ipsa ipsam libero magni maxime minima minus nemo nesciunt nulla numquam obcaecati officiis perferendis porro quibusdam quos repellendus reprehenderit rerum sit suscipit ullam vel voluptas voluptatem. Dolores.</p>
                </div>
            </div>
            <div class="column-visual">
                <div class="visual background-color-orange">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda dolorum eos laborum non saepe velit.</p>
                </div>
            </div>
        </div>
        <div class="row row-image_text">
            <div class="col-12 col-md-6 column-textfield">
                <div class="textfield">
                    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At debitis maiores modi quae quos. Beatae consectetur, dicta harum minima modi perferendis similique soluta tenetur voluptate voluptatum. Ad aperiam architecto beatae commodi dicta est harum numquam quod recusandae suscipit! Aliquam atque delectus dicta eum fugiat id in natus omnis, provident quia reiciendis reprehenderit tempore ut? Accusantium alias aliquid amet blanditiis commodi consectetur consequatur cumque delectus distinctio, doloremque eaque et, excepturi hic illo incidunt ipsa ipsam libero magni maxime minima minus nemo nesciunt nulla numquam obcaecati officiis perferendis porro quibusdam quos repellendus reprehenderit rerum sit suscipit ullam vel voluptas voluptatem. Dolores.</p>
                </div>
            </div>
            <div class="col-12 col-md-6 column-image">
                <div class="image">
                    <img src="/placeholder.jpg" alt="placeholder">
                </div>
            </div>
        </div>
    </div>
</section>

Answer 1

我根据您的描述设置了一个简单的演示。你可以在这里玩一玩

关键是不要叠加

position: absolute

。您想要的是允许文本元素依次定位。我还使用 CSS 网格来制作 2 列布局。覆盖层位于跨越两列的另一行上。我确信它在某种程度上也可以通过 Bootstrap 的 Flexbox 列实现。这正是我在考虑此类布局时发现的最直接的方法。

希望对您的具体情况有帮助:)

p {
  margin: 0;
}

.parent {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.overlay {
  margin: -40px 0;
  grid-column: 1 / span 2;
  position: relative;
  padding: 20px 0;
}

.overlay-inner {
  max-width: 500px;
  background-color: rgba(135, 206, 235, 0.9);
  padding: 20px;
  margin: 0 auto;
}

.image {
  /* aspect-ratio: 1; */
  background: pink;
}

.textfield {
  display: flex;
  align-items: center;
  padding: 60px 40px;
}

<section class="section-image_text">
  <div class="container parent">

    <div class="image">
      <img src="/placeholder.jpg" alt="placeholder">
    </div>

    <div class="textfield">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At debitis maiores modi quae quos. Beatae consectetur, dicta harum minima modi perferendis similique soluta tenetur voluptate voluptatum. Ad aperiam architecto beatae commodi dicta est harum
        numquam quod recusandae suscipit! Aliquam atque delectus dicta eum fugiat id in natus omnis, provident quia reiciendis reprehenderit tempore ut? Accusantium alias aliquid amet blanditiis commodi consectetur consequatur cumque delectus distinctio,
        doloremque eaque et, excepturi hic illo incidunt ipsa ipsam libero magni maxime minima minus nemo nesciunt nulla numquam obcaecati officiis perferendis porro quibusdam quos repellendus reprehenderit rerum sit suscipit ullam vel voluptas voluptatem.
        Dolores.
      </p>
    </div>

    <div class="overlay">
      <div class="overlay-inner">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda dolorum eos laborum non saepe velit.</p>
      </div>
    </div>

    <div class="textfield">
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. At debitis maiores modi quae quos. Beatae consectetur, dicta harum minima modi perferendis similique soluta tenetur voluptate voluptatum. Ad aperiam architecto beatae commodi dicta est harum
        numquam quod recusandae suscipit! Aliquam atque delectus dicta eum fugiat id in natus omnis, provident quia reiciendis reprehenderit tempore ut? Accusantium alias aliquid amet blanditiis commodi consectetur consequatur cumque delectus distinctio,
        doloremque eaque et, excepturi hic illo incidunt ipsa ipsam libero magni maxime minima minus nemo nesciunt nulla numquam obcaecati officiis perferendis porro quibusdam quos repellendus reprehenderit rerum sit suscipit ullam vel voluptas voluptatem.
        Dolores.
      </p>
    </div>

    <div class="image">
      <img src="/placeholder.jpg" alt="placeholder">
    </div>
  </div>
</section>