Here is the HTML code I am working with:
<html>
<head></head>
<body>
<div id="board">
<div class="person"></div>
</div>
</body>
</html>
And here is the CSS code:
*{
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;
}
My question concerns the positioning of the div with the class
.personin relation to the div with the id#board. I expect the.persondiv to be positioned absolutely to its parent element#boardsince the parent is positioned relatively. However, even with a significanttopvalue for.person, it does not stay within the boundaries of the parent div. Why is this happening? Any insights or feedback would be greatly appreciated.