CSS 定位 - 根据屏幕大小停止元素移动

Question

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

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

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

问题的说明如下： 下图是普通视图，上图是窗口缩小后移动的文本框。

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 写道：

一个位置固定的元素是相对于浏览器窗口定位的。

见here。

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

它随着页面底部移动

如果您希望框固定在给定位置，请删除“bottom”属性并指定“top”属性，就像使用“#cfbanner”一样。