Question

我试图将一个元素绝对放在页面底部（而不是视口）。该元素是BODY的直接子元素。您可以想象该页面包含大量内容，以便有一个滚动条。

这样的事情：

<body>
  <img id="target" src="images/code.png" style="position:absolute;bottom:0;"/>

这会将图像放在视口底部的现有内容上。但是，一旦我添加了以下css规则：

body{
  position:relative;
}

图片显示在页面底部。

因此，如果BODY不是所有元素的包含块，那么它是什么？

另外，我确信这是一个已解决的问题，但我找不到一个详细解释问题和解决方案的例子。有什么指针吗？

Answer 1

可能是<html>？

设置position: relative，看看会发生什么。

更新 - 直接来自quirksmode

包含块

为了指定元素的确切位置，您必须添加顶部，底部，左侧和/或右侧声明。这些都给出了相对于顶部/左侧或底部/右侧参考点的坐标。这个参考点是什么？

position：static：没有参考点，因为无法移动静态块。

position：relative：如果没有移动块，它将占用的位置（即，如果它有位置：静态）。

position：absolute：包含块，它是第一个没有position：static的祖先元素。 如果没有这样的祖先，<html>元素将作为包含块。（注意：在较旧的浏览器中，<body>元素用作默认包含块。） <--- Bingo

position：fixed：视口（浏览器窗口）。

Answer 2

好的，假设您有以下内容：

<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是元素下方显示的空间量。如果你想要一个彩色背景的身体，你希望它在页脚周围生效（例如，如果您的页脚只有屏幕的80％并居中，在任何一端留下10％），那么你总是可以尝试{ {1}}。

Answer 3

听起来像我的自然行为。你说页面会有很多内容，你会有一个滚动条。如果元素的位置为：绝对，它将根据最近的父级与位置相对来计算它的位置。

如果页面太高而你会有一个滚动条，那么body元素会伸展到页面的底部。你的形象（位置：绝对）是身体的孩子（位置：相对），所以我没有看到问题。

我也不太明白你的问题：

我试图绝对定位一个   页面底部的元素（不是   视口）。

这将图像放在底部   现有的视口   内容。但是，一旦我添加了   遵循css规则：

body {position：relative; }

图片显示在页面底部。

现在问题不是解决了吗？你想要最底层的图像吗？（当你向下滚动时你可以看到它）或者你想要它只是在折叠之上吗？

Answer 4

也许这有点傻，但我认为身体上面还有。我使用重置，在一些大的重复中总是这样一行： body，html {'css properties bladiebla'}。所以对我来说，暗示html是身体的容器，对我来说听起来很合乎逻辑;）（但我自己也找不到任何引用或证据。）

BODY标记为包含块的根级别

4 个答案: