使用绝对位置HTML CSS的按钮未在浏览器底部对齐

Question

我有一个元素（ <button id="foo">FAQ</button> ）。 我有该按钮的CSS，即：

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

问题在于该元素最终位于屏幕的底部（而不是我尝试的浏览器窗口），并且当您向下滚动时，它会停留在该位置。 我使用的是Google Chrome 53.0.x版。 我在Microsoft Edge中尝试过，问题仍然存在。 该按钮没有父级（除正文外）。 任何帮助将不胜感激！

编辑

屏幕截图：

当您向下滚动到底部时，我想使按钮显示出来，而绝对定位不起作用。 我可以看到我的问题没有得到很好的理解，所以我想作一些区分，以使我的问题更容易理解：

屏幕：窗口的可见部分（取决于滚动）浏览器窗口：整个网页（独立于滚动）

Answer 1

这不是position: absolute; 但position: fixed; 。

检查一下以了解可能的选项以及它们之间的区别：

绝对相对于其第一个定位（非静态）祖先元素定位的元素

已修复元素相对于浏览器窗口定位

Answer 2

您是否要在滚动时将其固定在浏览器窗口的底部？ 如果是这样，请给它一个固定的位置（ position: fixed;而不是position: absolute; ）。 如果您也想使其显示在页面上某些元素的上方或下方，请考虑设置这些元素的z-index 。