如何使用 'position: absolute' 将图像放置在彼此之上而不覆盖其他部分？ HTML CSS

Question

我试图将一张图片放在另一张图片之上，但是当我成功地使用 position: absolute 和 z-index 做到这一点时，结果没有响应，当媒体屏幕变小时它会继续 top/behind 的另一个部分，而不是扩展其 div。我已经尝试了很多方法，但它似乎弄乱了页面。关于如何解决这个问题有什么建议吗？

这就是我想要达到的结果。这就是问题

当我尝试将宽度设置为 100% 以便响应时，它也会破坏页面，但如果我不这样做，原始图像文件的大小对于某些设备来说会太大

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

Answer 1

在您的 img 上设置 max-width: 100%;，以便它可以相应地调整大小。

您也可以尝试 mt-4，它代表 margin-top: 1.5rem，用于新部分的额外间距。

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

Answer 2

绝对定位将元素从 dom 的流中取出。为防止重叠添加垫片。

#container{
display:flex;
background-color:lightblue;
position:relative;

}

#bottom{
position:absolute;
left:5%;
top:5vh;
}

#spacer{
height:5vh;
background-color:lightgreen;
}

div{
margin:0;
padding:0;
}

img{
width:50%;
}

<div id='container'><img id='top' 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">
         <img id='bottom' 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">
   
</div><div id='spacer'></div>

如何使用 'position: absolute' 将图像放置在彼此之上而不覆盖其他部分？ HTML CSS

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

html

css

twitter-bootstrap

bootstrap-5