how to position the image on top of each other using 'position: absolute' without it overlays other section? HTML CSS

Issue

I am trying to position one image on top of other but when I successfully did it with position: absolute and z-index, the result is not responsive and when the media screen becomes smaller it would go on top/behind of another section instead of expanding its div. I have tried many method already but it seems to mess up the page. Any suggestion on how to fix this?

this is the result I want to achieve.
expected result
This is the problem
this is what I got

and when I try to set width to 100% so it will be responsive it also ruin the page but If I don’t the size of the original image file will be too big for some devices

.container-home-about {
  padding-top: 65px;
  padding-bottom: 65px;
}

.row {
  height: 100%;
}

.about-content>p {
  font-size: 16px;
  font-weight: 400;
  color: #5d77aa;
}

.about-image {
  position: relative;
}

.img-bottom {
  position: relative;
  z-index: 0;
  top: 0;
  left: 0;
}

.img-top {
  position: absolute;
  z-index: 1;
  top: 80px;
  left: 75px;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<body>
  <div class="home home-about">
    <div class="container container-home-about">
      <div class="row">
        <div class="col-xl-6 col-lg-6 col-md-6 left">
          <div class="about-content">
            <p style="max-width: 520px;">
              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
              survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
              desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
          </div>
        </div>

        <div class="col-xl-6 col-lg-6 col-md-6 right">
          <div class="about-image">
            <img src="https://images.unsplash.com/photo-1472289065668-ce650ac443d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80" alt="" class="img-bottom">
            <img src="https://images.unsplash.com/photo-1500630417200-63156e226754?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="" class="img-top">
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="home home-partner" style="border-top: 1px solid #EAEAEA;">
    <div class="container container-home-partner">

      <div class="col-xl-3 col-lg-4 col-md-4 partner-title">
        <div class="title" style="z-index: 9;">World class brand</div>
        <div class="subtitle" style="z-index: 9;">Our Partners</div>
      </div>

    </div>

  </div>
</body>

Solution

Set max-width: 100%; on your img so it can resize accordingly.

You can also try mt-4 which stands for margin-top: 1.5rem for additional spacing on the new section.

.container-home-about {
  padding-top: 65px;
  padding-bottom: 65px;
}

.row {
  height: 100%;
}

.about-content>p {
  font-size: 16px;
  font-weight: 400;
  color: #5d77aa;
}

.about-image {
  position: relative;
}

.img-bottom {
  position: relative;
  z-index: 0;
  top: 0;
  left: 0;
}

.img-top {
  position: absolute;
  z-index: 1;
  top: 80px;
  left: 75px;
}

img {
  max-width: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">

<body>
  <div class="home home-about">
    <div class="container container-home-about">
      <div class="row">
        <div class="col-xl-6 col-lg-6 col-md-6 left">
          <div class="about-content">
            <p style="max-width: 520px;">
              Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has
              survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with
              desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
            </p>
          </div>
        </div>
        <div class="col-xl-6 col-lg-6 col-md-6 right">
          <div class="about-image">
            <img src="https://images.unsplash.com/photo-1472289065668-ce650ac443d2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1169&q=80" alt="" class="img-bottom">
            <img src="https://images.unsplash.com/photo-1500630417200-63156e226754?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80" alt="" class="img-top">
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="home home-partner mt-4" style="border-top: 1px solid #EAEAEA;">
    <div class="container container-home-partner">
      <div class="col-xl-3 col-lg-4 col-md-4 partner-title">
        <div class="title" style="z-index: 9;">World class brand</div>
        <div class="subtitle" style="z-index: 9;">Our Partners</div>
      </div>
    </div>
  </div>
</body>

Answered By – Kameron

Answer Checked By – Timothy Miller (AngularFixing Admin)

Leave a Reply

Your email address will not be published.