如何阻止两个 div 图像重叠？答案

【问题标题】：How to stop two div images overlapping?如何阻止两个 div 图像重叠？
【发布时间】：2021-08-22 16:50:19
【问题描述】：

我制作了一个投资组合，其中我有一个 home__img 浮动在第一页。现在我想在标题中添加图像head.png，但是当我在标题中添加div 和img 时，两个图像重叠。我希望我的home__img 与“嗨，我是……”的文本对齐，并且head,png 位于顶部。我该怎么做？

这是我的代码：

.home__img{
  position: absolute;
  right: 0;
  bottom: 10%;
  width: 295px;

}

@media screen and (min-width: 768px){
.home__img{
    width: 457px;
    bottom: 15%;
  }
 }
 
 @media screen and (min-width: 1024px){
  .home__img{
    right: 10%;

  }
}

<section>
        <div class="header-img">
          <img src="assets/images/header-img.png" alt="">
        </div>

<section class="home bd-grid" id="home">
        <div class="home__data">
          <h1 class="home__title">Hi, I'm <span class="home__title__color">Tahmid Mahi</span><br> Web Developer</span></h1>
          <a target="_blank" href="https://m.me/mmaitomm" class="button">Contact</a>
        </div>

        <div class="home__social">
          <a target="_blank" href="https://www.facebook.com/mmaitomm" class="home__social-icon"><i class='bx bxl-facebook' ></i></a>
          <a target="_blank" href="https://www.instagram.com/medffee" class="home__social-icon"><i class='bx bxl-instagram' ></i></a>
          <a target="_blank" href="https://www.github.com/tahmidmahi04" class="home__social-icon"><i class='bx bxl-github' ></i></a>
          <a target="_blank" href="https://www.tiny.one/maiiiwall" class="home__social-icon"><i class='bx bxl-android' ></i></a>
        </div>

        <div class="home__img">
          <img src="assets/images/perfil.png" alt="">

        </div>
      </section>

【问题讨论】：

也许您可以在问题片段中放置占位符的图像以进一步显示您的问题？

标签： html css image overlap overlapping

【解决方案1】：

如果我理解你的问题：

.home__img{
  position: absolute;
  right: 0;
  bottom: 10%;
  width: 295px;

}

@media screen and (min-width: 768px){
.home__img{
    width: 457px;
    bottom: 15%;
  }
 }
 
 @media screen and (min-width: 1024px){
  .home__img{
    right: 10%;
  }
}

<link href='https://unpkg.com/boxicons@2.0.9/css/boxicons.min.css' rel='stylesheet'>
<section>
  <div class="header-img">
    <img src="https://picsum.photos/50" alt="">
  </div>
</section>
<section class="home bd-grid" id="home">

  <div class="home__data">
    <h1 class="home__title">Hi, I'm <span class="home__title__color">Tahmid Mahi</span>
      <p> Web Developer</p>
    </h1>
    <a target="_blank" href="https://m.me/mmaitomm" class="button">Contact</a>
  </div>

  <div class="home__social">
    <a target="_blank" href="https://www.facebook.com/mmaitomm" class="home__social-icon"><i class='bx bxl-facebook' ></i></a>
    <a target="_blank" href="https://www.instagram.com/medffee" class="home__social-icon"><i class='bx bxl-instagram' ></i></a>
    <a target="_blank" href="https://www.github.com/tahmidmahi04" class="home__social-icon"><i class='bx bxl-github' ></i></a>
    <a target="_blank" href="https://www.tiny.one/maiiiwall" class="home__social-icon"><i class='bx bxl-android' ></i></a>
  </div>
  
  <div class="home__img">
    <img src="https://picsum.photos/300" alt="">
  </div>
</section>

【讨论】：