How to stop two div images overlapping?

I made a portfolio where I have an home__img floating in the first page. Now I want to add a image head.png in header but when I add a div and img in the header, both images overlaps. I want my home__img to be aligned with the text as "Hi I'm..." & the head,png to be at the top. How can I do that?

here is my code:

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

Solution

If i understand your question:

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