Strange css issue

Ionic Framework ionic-v3
1

I created app with below code in html file
image

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

image
image.jpg328×565 51.3 KB

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?