您可以创建不滚动为页面内容的div吗

Question

我不确定这是否可行：

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

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

我可以在该底部div /图像上使用CSS设置，以便浏览器基本上将其作为内容忽略吗？这样浏览器就不会尝试向下滚动到它？我不知道这是否可行。

另外，我可以使图像成为<body>背景的一部分，但是如何强制该图像显示在内容div的正下方？当您更改窗口大小时，由于其内部内容的更改，我的内容div的高度也会更改。因此，我不确定如何始终确保该底部图像（如果是背景）恰好在最后一个内容div之后显示。

更新

这是一个可以帮助说明我要执行的操作的链接：http : //jsbin.com/ojejad/2/edit

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

这样做的原因是，我希望人们仅在其监视器足够大时才能在底部看到绿色图像，而他们自然无需滚动即可看到所有蓝色+绿色。但是，如果用户的监视器太小，我不希望他们滚动到页面底部并继续滚动以仅查看该图像，因为它实际上应该只是背景图像，而不是重要内容的一部分。

Answer 1

如果您想在屏幕上贴一些东西，请使用

position:fixed;

像这样：

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

编辑：

如果您想保留某些东西以供其父母使用

position:absolute;

在要粘贴的元素上

position:relative;

在父母身上。

绝对位置不尊重任何东西，除了具有非静态位置的下一个父对象。

例