CSS 定位 - 停止元素随屏幕尺寸移动

Question

有点新手的问题，但我遇到这个问题已经有一段时间了，我需要解决它。希望你们中的一个可以提供帮助。

我的页面底部附近有一个文本框。它的位置是固定的，但是，每当我调整浏览器窗口大小时，它都会随着页面底部移动。我也尝试过绝对和相对定位，但仍然是同样的问题。我一直在阅读 CSS 定位，并假设我理解它，直到出现这个小问题。

我的页面顶部有一个标题栏，它的位置是固定的，并且不会移动，所以我想知道有什么区别？

问题的说明在这里:下图是正常 View ，上图是窗口缩小时移动的文本框。

http://imgur.com/a/cdZsV

我的文本框名为“typetextbox”，标题横幅为“cfbanner”

CSS 是:

#cfbanner{
position: fixed;
top: 0px;
left: -130px;
z-index:-20

}

#typetextbox{
left: 130px;
bottom: 50px;
position: fixed;
width: 850px;

我确信这很容易修复。如果能提供一点帮助，我们将不胜感激!

Answer 1

您的 typetextbox 的行为似乎是正确的，因为您指定要固定的框并且到底部的距离为 50px。

W3Schools.com 写道:

An element with fixed position is positioned relative to the browser window.

参见 here .

因此，如果您缩小浏览器窗口，文本框将粘在窗口底部，因此，如您所写:

it moves with the bottom of the page

如果您希望框停留在给定位置，请删除“bottom”属性并指定“top”属性，就像您使用“#cfbanner”所做的那样。