Absolute positioned Element not sticking to the bottom when scrolled

August 9, 2023

I have a basic implimentation of a sticky button that I want to stick to the bottom right of the page in an Angular app. I’m read a few questions on Stack Overflow for this but the solution from them doesn’t seem to be working.

It displays in the bottom right when the page first loads, but when you scroll down the page it scrolls up with the rest of the page. And I need it to stay in bottom right when scrolling.

Without the noise of the rest of the app The basic watered down code is:

<html>
   <body style="position: relative; overflow: auto">
      <div style="position:absolute'; bottom:0; right:0;">
         <iframe>***dynamically loaded button***</iframe>
      </div>
   </body>
</html>

I can’t for the life of me understand why this isn’t working. I’ve done thin 100 times and it’s always worked this way.

I’ve checked the inspection panel and no other CSS is over-riding the style tags they are being registered as the ‘active’ css. Is it maybe something to with the iframe?

>Solution :

As far as I understand what you are trying to achieve, you should use position:fixed instead of position: absolute
You can check this w3schools page https://www.w3schools.com/css/css_positioning.asp