I am encountering an issue with positioning an element (
<button id="foo">FAQ</button>
). The CSS code I have for the button is:
#foo {
position: absolute;
bottom: 0px;/* I have also tried using different units */
left: 0px;/* same thing here*/
}
The problem is that the element appears at the bottom of the screen instead of the browser window as intended, and it remains fixed in its position even when scrolling down. This issue persists both on Google Chrome version 53.0.x and Microsoft Edge. The button does not have any parent elements besides the body. Any assistance on resolving this would be highly appreciated!
EDIT
Screenshot: https://i.sstatic.net/AGnsS.png
I am aiming to have the button become visible only when scrolling down to the bottom, but using absolute positioning alone does not achieve this. To clarify my question further, I'd like to distinguish between the terms 'screen' (the visible part affected by scrolling) and 'browser window' (the entire webpage regardless of scroll position).