Question

我不确定这是否可行：

我有一个网页上有几个div的内容，一个堆叠在另一个上面。在所有内容div的底部，我希望有一个100px高的图像（或者它可能是带有background-image的DIV。）

当您查看此页面时，浏览器会创建滚动条，以便您可以向下滚动内容，同时也可以将底部div / image滚动到视图中。

我可以在底部div / image上使用CSS设置，以便浏览器基本上忽略它作为内容吗？那么浏览器不会尝试向下滚动到它？我无法弄清楚这是否可能。

或者，我可以将图像作为<body>背景的一部分，但是如何强制此图像显示在我的内容div的正下方？当您更改窗口大小时，我的内容div的高度会因更改内容的内容而发生变化。所以我不确定你怎么能总是确保这个底部图像完全出现在最后一个内容div之后，如果它是一个背景。

更新

这是一个链接，可以帮助说明我正在尝试做的事情：http://jsbin.com/ojejad/2/edit

向下滚动时，绿色显示，因为它显然是页面内容的一部分。是否有可能浏览器不考虑页面内容的绿色div部分，以便滚动停止在蓝色的底部？

这样做的原因是我希望人们只在他们的显示器足够大以至于他们自然地看到所有蓝色+绿色而不必滚动时才能看到底部的绿色图像。但是如果用户的显示器太小，我不希望它们滚动到页面底部并继续滚动只是为了看到这个图像，因为它实际上应该只是一个背景图像而不是重要内容。< / p>

Answer 1

如果您想要某些东西粘在屏幕上，请使用

position:fixed;

像这样：

div {
  background-color:blue;
  height:200px;
  width:200px;
  position:fixed;
  bottom:0;
}

编辑：

如果你想要坚持其父用途

position:absolute;

关于要粘贴的元素和

position:relative;

在父母身上。

绝对位置不会影响除静态以外位置的下一个父级以外的任何内容。

实施例