Html BODY标记作为包含块的根级别_Html_Css

Html BODY标记作为包含块的根级别

html css

Html BODY标记作为包含块的根级别,html,css,Html,Css,我试图在页面底部（而不是视口）绝对定位一个元素。元素是主体的直接子元素。您可以想象页面有很多内容，因此有一个滚动条比如说： <body> <img id="target" src="images/code.png" style="position:absolute;bottom:0;"/> 图像转到页面底部那么如果BODY不是所有元素的包含块，那么它是什么？此外，我确信这是一个已解决的问题，但我找不到一个详细解释问题和解决方案的示例。有指针吗？好，假设您有以下

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

主体

的直接子元素。您可以想象页面有很多内容，因此有一个滚动条

比如说：

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

图像转到页面底部

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

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

好，假设您有以下指针：

<body>
    <img id="target" src="images/code.png" style="position:absolute;bottom:0;"/>
    <div style="margin-bottom: 50px">Content here</div>
</body>


满足于此

这应该可以解决问题。显然，将底部边距设置为图像的高度。否则，您可以尝试将body标记的底部边距设置为图像的高度，然后将图像的底部设置设置为-{height of the image}。这应该达到与上面相同的效果

PS如果您没有意识到，

边距底部

是元素下方显示的空间量。如果你想要一个彩色的身体背景，并且你想让它在页脚周围生效（比如说，如果你的页脚只占屏幕的80%并且居中，在每一端留下10%），那么你可以尝试填充底部：50px

它可能是

设置
位置：相对
，看看会发生什么。

更新-直接从

包含的块

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

位置：静态：无参考点，因为静态块无法移动

位置：相对：块在未移动时所处的位置（即，如果其具有位置：静态）

position:absolute：包含块，它是没有position:static的第一个祖先元素如果没有这样的祖先，则
元素充当包含块。（注意：在较旧的浏览器中，
元素作为默认的包含块。）

听起来像是自然行为。你说页面会有很多内容，你会有一个滚动条。如果元素的位置为：绝对，则它将根据最近的父元素的相对位置来计算其位置
如果页面很高，您可能会有一个滚动条，那么body元素将延伸到页面底部。你的图像（位置：绝对）是身体的子对象（位置：相对），所以我看不出有什么问题
我也不太明白你的问题：
我试图绝对定位一个
页面底部的元素（不是
视口）
这会将图像放在页面底部
现有视图上的视口
内容。然而，一旦我添加了
以下css规则：
body{
  position:relative;
}

正文{位置：相对；}
图像转到页面底部
问题现在解决了吗？你想把图像放在最下面吗？（当你向下滚动时，你可以看到它）或者你想要它就在折叠的上方吗？也许这有点傻，但我认为它在身体上方。我使用重置，在一些大型重置中，总是这样一行：
正文，html{'css属性bladiebla'}。
因此，对我来说，这表明html是body的容器，对我来说，这听起来非常合乎逻辑；）（但我自己上午找不到任何参考资料或证据。）
这是在哪些浏览器中发生的？没错！但我觉得这很奇怪。浏览器默认情况下不应该应用position:relative吗？为什么我们必须明确地应用这一点。感觉不正确，不能解释这种行为。我不认为存在可靠的违约，这并不一定意味着它已经解决。按照我的逻辑，当有大量内容时，将图像放置在底部实际上会将其放置在部分内容上。我认为它只需要在正文（或页边空白）上添加填充物，就可以将图像放在所有内容下面。看看我的答案，问题肯定解决了。但这意味着默认情况下，BODY不是包含块。在做了更多的探索之后，似乎HTML标记已经被激活，并且它只延伸到了视口。在HTML标记上添加一个position:relative会使它再次正确。我确信你不需要像这样定位图像来完成你需要的工作。当然，链接是有帮助的，但是你确实可以做一些事情，这样你就不会像你一样去定位图片了。让我再解释一遍。问题是要找出包含块的顶层，哪一个实体显然不是。哦，好的，现在我明白了。我想你指的是这张照片的第一个家长。很抱歉给你带来了困惑。