Button not Aligning at Bottom of Browser with Absolute Positioning HTML CSS

Question

I have an element ( <button id="foo">FAQ</button> ). I have css for that button that is:

#foo {
    position: absolute;
    bottom: 0px;/* I tried using other units */
    left: 0px;/* same thing here*/
}

The problem is that the element ends up at the bottom of the screen (not browser window like I'm trying to do), and when you scroll down, there it stays there. I'm using google chrome version 53.0.x. I tried it in Microsoft Edge, and the problem is still there. The button has no parent (besides body). Any help would be greatly appreciated!

EDIT

Screenshot:

I want to make the button show up when you scroll down to the bottom, and absolute positioning doesn't do it. I can see that my question is not well understood, so I would like to make some distinctions that might help make my question easier to understand:

screen: visible part of the window (dependent of scrolling) browser window: the entire webpage (independent of scrolling)

Answer 1

It is not position: absolute; but position: fixed; .

Check this out to understand the possible options and the differences between them:

absolute The element is positioned relative to its first positioned (not static) ancestor element

fixed The element is positioned relative to the browser window

Answer 2

Are you trying to get it to sticky to the bottom of the browser window as you scroll? If so, give it a fixed position ( position: fixed; instead of position: absolute; ). If you want to get it to appear above or below certain elements on the page as well, look into setting the elements' z-index .