如何停止两个 div 图像重叠？

Question

我制作了一个作品集，其中 home__img 浮动在第一页中。现在我想在 header 中添加图像 head.png，但是当我在 header 中添加 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>

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

如何停止两个 div 图像重叠？

How to stop two div images overlapping?

html

css

image

overlap

overlapping