Preventing floating button to move on mobile when browser address bar hides - angularjs

Question

I developing a mobile website with angular-material which uses a floating button on the homepage as seen in many Google Applications. The button is always present and fixed in the right lower corner. It all works well. However, when I scroll the page and the browser address bar hides, the body height changes as well. The result is that the button moves up, too. See the images for better understanding.
This is the CSS of the button:
.floating-button{
position: fixed;
margin-top: 120%;
margin-left: 80%;
}
When i use top instead of margin-top, the button moves up and once the address bar is hidden, it jumpes back down.
Is there any possibility that the button will stay fixed? I would prefer not forcing the address bar to hide or stay fixed. Thanks in advance!

Answer 1

.floating-button{
position: absolute;
margin-top: 120%;
margin-left: 80%;
}
Try using the position absolute rule instead. Position absolute keeps an element on the page where you specify it independent of other elements.

Answer 2

I know this is an old question, but I came here with a similar problem and a combination of your question and what I already had solved my problem.
What I had is that the FAB would get hidden (move down) when the address bar is triggered and Kiko's answer didn't change that, so I assume it would bring my problem to your code.
For it to stop moving, I had to change my position: absolute to fixed like yours. The rest of the CSS is below:
.floating-button {
position: fixed;
right: 20px;
bottom: 20px;
}
I hope this helps future people passing by.