当其父元素相对定位时，为什么我的子元素定位到主体？答案

【问题标题】：Why is my child element positioned to the body when its parent is positioned relative?当其父元素相对定位时，为什么我的子元素定位到主体？
【发布时间】：2020-12-15 09:56:50
【问题描述】：

我的html如下：

<html>
<head></head>
<body>
<div id="board">
<div class="person"></div>

</div>
</body>
</html>

现在这是我的 css：

*{
margin:0;
padding:0;
box-sizing:border-box;
}
#board{
position:relative;
height:500px;
width:500px;
background:yellow;
top:5rem;
left:8rem;

}
.person{
position:absolute;
top:34rem;
left:20px;
padding:1rem;
background-color:blue;
}

现在我的问题是为什么 .person 的 div 没有绝对定位到 #board 的 div？我觉得它应该可以工作，因为父元素是相对定位的，然后子元素应该将自己定位到该父元素的绝对位置。当我给.person div 一个疯狂的top 时，它仍然设法突破父 div。这是为什么？感谢您的任何反馈。

【问题讨论】：

在父元素为position: relative 的元素上使用position: absolute 将始终允许它超出其父元素的边界；这就是使用它的重点。在此处查看absolute 的文档：developer.mozilla.org/en-US/docs/Web/CSS/position#Values
所以真的没有什么东西可以让子div被困在父元素内而不能离开父div？
我一定会检查链接。
你到底想完成什么？

标签： html css

【解决方案1】：

我检查了你的代码，它似乎工作正常，它只是在 .person 你有 top:34rem;

如果您设置.person top:0rem; 并将#board 的top:#rem 更改为任何其他rem 值，您将看到.person 与#board 一起移动

此外，使用absolute 位置会从文档工作流程中删除该元素，因此您可以将其放置在页面上任何您喜欢的位置。负值也有效。唯一的问题是，它会查找第一个非static 元素（元素的默认位置）作为开始的位置，因此您可以将其用作标记而不是窗口本身。如果您没有将relative 放在#person 上并且周围没有其他非static 元素，它将转到最外面的元素并基本上使用网页作为其初始定位的标记。由于您使用了relative，它在那里开始了它的absolute 定位，因为它是第一个非static 元素。你仍然可以将它移动到任何地方，但它只是从那里开始。

【讨论】：

好的，谢谢。所以我毕竟正确使用它。非常感谢。
任何时候 :)，如果您喜欢我的回答，您介意标记支票以解决帖子吗？