Html 为什么绝对定位的孩子和有边界的父母之间有一个小差距？所有边距、填充和位置都设置为0

我重新创造了我所面临的现象的精简版本。因此父对象具有

位置：相对
，子对象具有
位置：绝对
，且所有方向值均设置为零。根据我的经验，这通常会将孩子直接伸展到父母的上方。另外，
*{margin:0；padding:0}
设置为安全，并确保这不是
margin
或
padding
问题

我知道我可以将子元素
-1px
设置为左上。。。但我有点好奇，如果孩子直接伸展到父母身上，为什么会发生这种情况？有没有办法让它在
顶部
、
右侧
、
底部
、以及
左侧
设置为0时工作


*{
保证金：0；
填充：0；
}
身体{
padding:5rem；/*将div推近代码段窗口的中心*/
}
div{
变换：添加比例（5）；/*以便于看到位移*/
}
div，div：：之后{
显示：块；
位置：相对位置；
宽度：1em；
高度：1公厘；
背景色：#eee；
边框样式：实心；
边界宽度：0.1rem；
边框颜色：#666；
边界半径：0.25雷姆；
内容：''；
}
div：：之后{
位置：绝对位置；
顶部：0；右侧：0；底部：0；左侧：0；
}
参考是
填充框
，而不是
边框框

如果元素具有“位置：绝对”，则包含块由最近的祖先以“绝对”、“相对”或“固定”的“位置”按以下方式建立：

。。。包含块由祖先的填充边构成。

然后，由于您正在定义
左
/
右
/
宽度
，且宽度等于父（包含块）宽度，因此将忽略
右
（对其使用任何值，不会发生任何情况）

如果值受到过度约束，则忽略“左”（如果包含块的“方向”属性为“rtl”）或“右”（如果“方向”为“ltr”）的值，并求解该值

与
顶部
/
底部
/
高度
相同的逻辑，其中
底部
被忽略

例如，如果您将边框替换为
框阴影
，您将有一个完美的重叠：


*{
保证金：0；
填充：0；
}
身体{
padding:5rem；/*将div推近代码段窗口的中心*/
}
div{
变换：添加比例（5）；/*以便于看到位移*/
}
div，div：：之后{
显示：块；
位置：相对位置；
宽度：1em；
高度：1公厘；
背景色：#eee；
盒影：0.1rem#666；
边界半径：0.25雷姆；
内容：''；
}
div：：之后{
位置：绝对位置；
顶部：0；右侧：0；底部：0；左侧：0；
}
那么这种行为是正常的？我不认为我在过去把绝对定位的孩子放在他们的头上时有过这个问题parents@devsandbox也许你从来没有边界。这种行为非常古老，在Spec@devsandbox添加了更多细节你说得对。通常我的元素没有这样的边界。移除它们似乎可以解决问题。。。嗯……至少有点奇怪