CSS issue in Ionic App - css

Question

I created app with below code in html file
<ion-content fullscreen>
<div class="header-parent">
<img src="assets/img/bg2.jpg>
<div class="header-social">
<img style="width:18%; margin-right:3vw src="assets/img/love-btn.png">
<img style="width:40%; src="assets/img/friend-btn.png">
<img style="width:18%; margin-right:3vw src="assets/img/chat-btn.png">
<div>
<div class="profile>
<img src="assets/img/profile-pic.png">
</div>
<div>
</ion-content>
and css is as below
.header-parent{
position: relative;
text-align: center;
}
.header-social{
position: absolute;
bottom: 0px;
text-align: center;
margin-top: -5.5vh;
}
.profile{
width: 25%;
margin: 0 auto;
margin-top: -34vh;
}
This shows the page as
My Question is red heart button, blue friend button and green chat button should display below the background image as per the css…but why are they displaying above image? bg2.jpg image is inside the div and all those 3 buttons are given position absolute and bottom:0 so they should display below image as div containing image should end at image.
What is wrong in my understanding? Please clarify…I have spent hours to understand this but still no luck why is it behaving like this?

Answer 1

First you should write your html code properly there is lots of syntax error in ur html code.
<ion-content fullscreen>
<div class="header-parent">
<img src="assets/img/bg2.jpg">
<div class="header-social">
<img style="width:18%; margin-right:3vw" src="assets/img/love-btn.png">
<img style="width:40%;" src="assets/img/friend-btn.png">
<img style="width:18%; margin-right:3vw" src="assets/img/chat-btn.png">
<div>
<div class="profile">
<img src="assets/img/profile-pic.png">
</div>
</ion-content>
And try this css
.header-parent{
text-align: center;
}
.header-social{
position:fixed;
width:100%;
bottom: 0px;
text-align: center;
}
.profile{
width: 25%;
margin: 0 auto;
margin-top: -34vh;
}

Answer 2

Negative margin of -5.5vh is causing the .header-social to move up and overlap on the profile pic. Here's how your CSS should be to get the desired output.
.header-parent{
background-image:('assets/img/bg2.jpg'); //bg image would be a better option rather than an img tag
position:relative; //for positioning profile div relatively
}
.header-social{
position:absolute;
bottom:0;
}
.profile{
width: 25%;
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
//this will position the profile pic centered both horizontally & vertically.
}