Strange css issue

I created app with below code in html file

and css is as below

    position: relative;
    text-align: center;

    position: absolute;
    bottom: 0px;
    text-align: center;
    margin-top: -5.5vh;

    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?