我试图将一个元素绝对定位在页面底部（而不是视口底部）。该元素是 BODY 的直接子元素。您可以想象页面有很多内容，因此存在滚动条。
例如：
<body>
<img id="target" src="images/code.png" style="position:absolute;bottom:0;"/>
这将把图像放在现有内容的视口底部。然而，一旦我添加了以下CSS规则：
body{
position:relative;
}
图片已经移到页面底部。
如果BODY不是所有元素的包含块，那么是什么？
此外，我相信这是一个已解决的问题，但我找不到一个有详细解释问题和解决方案的示例。有什么提示吗？
这可能是<html>吗？
在其中设置position: relative，看看会发生什么。
更新 - 来自quirksmode
包含块
为了指定元素的确切位置，您必须添加上、下、左和/或右声明。所有这些都相对于上/左或下/右参考点给出坐标。这个参考点是什么？
position: static: 没有参考点，因为静态块无法移动。
position: relative: 块将采用的位置，如果它没有被移动（也就是说，如果它具有position：static）。
position: absolute: 包含块，它是第一个祖先元素，它没有position：static。 如果没有这样的祖先，则
<html>元素用作包含块。 （注意：在旧版浏览器中，<body>元素用作默认包含块。）<--- 符合position: fixed: 视口（浏览器窗口）。
好的，假设你有以下内容：
<body>
<img id="target" src="images/code.png" style="position:absolute;bottom:0;"/>
<div style="margin-bottom: 50px">Content here</div>
</body>
这应该可以解决问题。显然将底部边距设置为图像的高度。否则，您可以尝试将body标签的底部边距设置为图像的高度，然后将图像的底部设置为-{图像的高度}。这应该可以实现与上述相同的效果。
PS：如果您没有意识到，margin-bottom是元素下方出现的空间量。如果您想要为body设置有色背景，并希望其在页脚周围生效（例如，如果您的页脚仅占屏幕的80％并且居中，两端留下10％），那么您可以尝试使用padding-bottom: 50px。
听起来对我来说是自然的行为。你说页面会有很多内容，而且会有一个滚动条。使用position: absolute属性的元素将根据最近的具有相对定位的父元素计算其位置。
如果页面很高，你会有一个滚动条，body元素将延伸到页面底部。你的图像（position: absolute）是body（position: relative）的子元素，所以我不认为有问题。
我也不太明白你的问题：
我试图将一个元素绝对定位在页面底部（而不是视口）。
这将把图像放在现有内容上方的视口底部。但是，一旦我添加了以下CSS规则：
body{ position:relative; }
图像就移到了页面底部。
问题现在解决了吗？你想让图片在最底部吗？（当你向下滚动时可以看到它），还是想让它在折叠线上方？