position: fixed; fixing elements to page not screen

Hi,

I’ve been trying to add a fixed element to one of my pages much like the ‘contact form’ and ‘back to top’ elements in the bottom right corner, however, ‘position: fixed;’ is just fixing the element relative to the bottom of the page not the screen. It scrolls with page.

I have adjusted the z-index of some of the other elements in the page which apparently can cause issues with ‘position: fixed;’ property in chrome, so then also tried again with the suggested fix of:
-webkit-backface-visibility: hidden;
-webkit-transform: translateZ(0);
Unfortunately this did not fix my issue, and it also appears to behave in the same manner in firefox, therefore I came to the conclusion that there may be a conflict between my custom css and the theme css. I was hoping you may be able to help me with this! please!

many thanks in advance!