Question 241179 in Html Question posted in
Some basic documentation can be found here.

Html – How to make page flow continue after using absolutely positioned images?

I’d like to have objects positioned under some images that need to be overlaid. To make the images overlay I’m positioning them absolutely. But when I do this, all content that needs to go underneath the images ends up at the top of the page. Whatever I try I can’t make the content go underneath.

.container {
  position: relative;
}

.container img {
  position: absolute;
  z-index: -1;
  /* make it easy to see .more-page-content */
}
<header>
  Header at the top of the page
</header>
<main>
  <div class="container">
    <img src="https://i.imgur.com/ww9TYQv.jpg" alt="blocks">
    <img src="https://i.imgur.com/mqReB3b.png" alt="sample">
  </div>
  <div class="more-page_content">Text that should be below the images</div>
</main>
<footer>
  Footer that should be at the bottom of the page
</footer>

https://jsfiddle.net/94ot7dv2/

Tags:

2

Answers


  1. 0

    Instead of z-index, try top: 0 like this:

      
.container {
  position: relative;
}
.container .absolute-image {
  position: absolute;
  top: 0;
  max-width: 50%;
}
.container .blocks-image {
  max-width: 50%;
}
    <!DOCTYPE html>
<html>
  <body>
    <header>
      Header at the top of the page
    </header>
    <main>
      <div class="container">
        <img class="blocks-image" src="https://i.imgur.com/ww9TYQv.jpg" alt="blocks">
        <img class="absolute-image" src="https://i.imgur.com/mqReB3b.png" alt="sample">
      </div>
      <div class="more-page_content">Text that should be below the images</div>
    </main>
    <footer>
      Footer that should be at the bottom of the page
    </footer>
  </body>
</html>
    Login or Signup to reply.
  2. 0

    As user DBS said in the comments, the main issue is that since you set position: absolute for the <img> children, they are now out of the flow, and the .container parent is behaving as if it were empty (there’s nothing occupying any space inside it).

    You can set a size for your container, make your images fit 100% of the container’s width or height, and use object-fit: contain to prevent distortions.

    I hard-coded pixels to specify a size, but you can choose the best approach based on your layout needs. Just ensure the parent container creates a defined area for the children.

    Reading:

    img {
  height: 100%;
  object-fit: contain;
  position: absolute;
}

.container {
  position: relative;
  height: 800px;
 }
    <!DOCTYPE html>
<html>
  <body>
    <header>
      Header at the top of the page
    </header>
    <main>
      <div class="container">
          <img src="https://i.imgur.com/ww9TYQv.jpg" alt="blocks">
          <img class="absolute-image" src="https://i.imgur.com/mqReB3b.png" alt="sample">
      </div>
      <div class="more-page_content">Text that should be below the images</div>
    </main>
    <footer>
      Footer that should be at the bottom of the page
    </footer>
  </body>
</html>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search