html - Problem with positioning overlay on top of Text-Image-Section - Stack Overflow

admin管理员组

文章数量:1026154

i have a problem with positioning an overlay on top of a Text-Image-Section. I tried to visualize the expected result in the attached image. The overlay (blue) should be positioned on top, without overlaying the texts. All texts (in the Text-Image-Section and in the overlay) are dynamic (in length).

Preferably i would solve it without the use of JS, but can't think of any possible Solution.

The used stack is PHP, HTML, CSS (SCSS), JS (jQuery) and Bootstrap (v5). Expected Result

I tried to position the overlay with position absolute and with transform, but in both cases i can't garantuee to not overlay the texts.

That's my HTML at the moment:

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

i have a problem with positioning an overlay on top of a Text-Image-Section. I tried to visualize the expected result in the attached image. The overlay (blue) should be positioned on top, without overlaying the texts. All texts (in the Text-Image-Section and in the overlay) are dynamic (in length).

Preferably i would solve it without the use of JS, but can't think of any possible Solution.

The used stack is PHP, HTML, CSS (SCSS), JS (jQuery) and Bootstrap (v5). Expected Result

I tried to position the overlay with position absolute and with transform, but in both cases i can't garantuee to not overlay the texts.

That's my HTML at the moment:

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

• html
• css
• sass

Share Improve this question Follow edited Nov 17, 2024 at 17:23 ADyson 62.2k1616 gold badges7979 silver badges9292 bronze badges asked Nov 17, 2024 at 17:14 ches75ches75 111 silver badge11 bronze badge 2

• If you put thousands of words within the blue region, how can you "guarantee" that it will not cover the text areas ? would you accept using ellipsis by CSS ? – Ken Lee Commented Nov 17, 2024 at 17:14
• Thats not a case i want or need to cover. It's more about a difference between 2-5 or 6 Lines of text. – ches75 Commented Nov 17, 2024 at 17:51

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

I have setup a simple demo based on your descriptions. You can have a play around with it in here

The key is to not make the overlay position: absolute. What you want is to allow your text elements to position themselves after one another. Also i used a CSS Grid to make the 2-column layout. The overlay is on another row that spans two columns. I'm sure its somehow also possible with bootstrap's flexbox columns. It's just what i find the most straight-forward when thinking about layouts like these.

hope that helps your specific situation :)

p {
  margin: 0;
}

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

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

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

i have a problem with positioning an overlay on top of a Text-Image-Section. I tried to visualize the expected result in the attached image. The overlay (blue) should be positioned on top, without overlaying the texts. All texts (in the Text-Image-Section and in the overlay) are dynamic (in length).

Preferably i would solve it without the use of JS, but can't think of any possible Solution.

The used stack is PHP, HTML, CSS (SCSS), JS (jQuery) and Bootstrap (v5). Expected Result

I tried to position the overlay with position absolute and with transform, but in both cases i can't garantuee to not overlay the texts.

That's my HTML at the moment:

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

i have a problem with positioning an overlay on top of a Text-Image-Section. I tried to visualize the expected result in the attached image. The overlay (blue) should be positioned on top, without overlaying the texts. All texts (in the Text-Image-Section and in the overlay) are dynamic (in length).

Preferably i would solve it without the use of JS, but can't think of any possible Solution.

The used stack is PHP, HTML, CSS (SCSS), JS (jQuery) and Bootstrap (v5). Expected Result

I tried to position the overlay with position absolute and with transform, but in both cases i can't garantuee to not overlay the texts.

That's my HTML at the moment:

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

• html
• css
• sass

Share Improve this question Follow edited Nov 17, 2024 at 17:23 ADyson 62.2k1616 gold badges7979 silver badges9292 bronze badges asked Nov 17, 2024 at 17:14 ches75ches75 111 silver badge11 bronze badge 2

• If you put thousands of words within the blue region, how can you "guarantee" that it will not cover the text areas ? would you accept using ellipsis by CSS ? – Ken Lee Commented Nov 17, 2024 at 17:14
• Thats not a case i want or need to cover. It's more about a difference between 2-5 or 6 Lines of text. – ches75 Commented Nov 17, 2024 at 17:51

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

I have setup a simple demo based on your descriptions. You can have a play around with it in here

The key is to not make the overlay position: absolute. What you want is to allow your text elements to position themselves after one another. Also i used a CSS Grid to make the 2-column layout. The overlay is on another row that spans two columns. I'm sure its somehow also possible with bootstrap's flexbox columns. It's just what i find the most straight-forward when thinking about layouts like these.

hope that helps your specific situation :)

p {
  margin: 0;
}

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

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

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

本文标签： htmlProblem with positioning overlay on top of TextImageSectionStack Overflow