Html 为什么我的子元素相对于主体定位，而其父元素相对于主体定位？_Html_Css

Html 为什么我的子元素相对于主体定位，而其父元素相对于主体定位？

html css

Html 为什么我的子元素相对于主体定位，而其父元素相对于主体定位？,html,css,Html,Css,我的html如下所示：现在我的问题是，为什么带有.person的div与带有#board的div没有绝对定位？我觉得它应该是有效的，因为父元素是相对定位的，然后子元素应该将自己定位到父元素的绝对位置，因为这一点。当我给.persondiv一个疯狂的top时，它仍然设法摆脱父div。这是为什么？谢谢你的反馈我检查了你的代码，它似乎工作正常，只是在上。person你有top:34rem 如果您设置.persontop:0rem并将#board的顶部：#rem更改为任何其他rem值，您将看到.pe

我的html如下所示：

现在我的问题是，为什么带有

.person

的div与带有

#board

的div没有绝对定位？我觉得它应该是有效的，因为父元素是相对定位的，然后子元素应该将自己定位到父元素的绝对位置，因为这一点。当我给

.person

div一个疯狂的

top

时，它仍然设法摆脱父div。这是为什么？谢谢你的反馈

我检查了你的代码，它似乎工作正常，只是在

上。person

你有

top:34rem
如果您设置.person
top:0rem
并将#board
的顶部：#rem
更改为任何其他rem值，您将看到.person
随#board
移动
另外，使用absolute
position将该元素从文档工作流中删除，因此您可以将其放置在页面上任何您喜欢的位置。负值也起作用。唯一的问题是，它会查找第一个非

静态元素（元素的默认位置）作为起点，因此您可以将该元素用作标记，而不是窗口本身。如果你没有把

相对的

放在

#person

上，并且周围没有其他非

静态的

元素，它会转到最外层的元素，基本上使用网页作为其初始定位的标记。由于使用了

relative

，它在那里开始其

absolute

定位，因为它是第一个非

静态

元素。您仍然可以将其移动到任何位置，但它只是从那里开始。

在父元素为

position:relative

的元素上使用

position:absolute

将始终允许其延伸到父元素的边界之外；这正是使用它的意义所在。请参见此处的

absolute

文档：因此，实际上没有任何东西允许子div被困在父元素中，而在父元素中它不能超出父div？我也一定要检查链接。您到底想实现什么？好的，谢谢。所以我还是正确地使用它。非常感谢。任何时候：），如果你喜欢我的答案，你介意在支票上划线来解决这个问题吗？

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

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

*{
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;
}