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>