html - 按钮未与绝对定位 HTML CSS 的浏览器底部对齐

Question

我有一个元素 ( <button id="foo">FAQ</button> )。我有那个按钮的 CSS:

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

问题是该元素最终出现在屏幕底部(而不是像我尝试做的浏览器窗口)，当您向下滚动时，它会停留在那里。我使用的是谷歌浏览器 53.0.x 版。我在Microsoft Edge中试过了，问题依旧。该按钮没有父级(除了主体)。任何帮助将不胜感激!

编辑

截图:

我想让按钮在您向下滚动到底部时显示出来，而绝对定位无法做到这一点。我可以看出我的问题没有得到很好的理解，所以我想做一些区分可能有助于使我的问题更容易理解:

screen:窗口的可见部分(依赖于滚动)浏览器窗口:整个网页(独立于滚动)

Answer 1

不是position: absolute;而是position: fixed;。

Check this out了解可能的选项以及它们之间的区别:

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

fixed The element is positioned relative to the browser window