CODEWITHSUNDEEP
htmlcss
user14827016
user14827016

Reputation:

Why is my child element positioned to the body when its parent is positioned relative?

My html is as follows:

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

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

Now here is my 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;
}

Now my question is why does the div with .person not positioned absolute to the div with #board? I feel like it should work since the parent element is positioned relative and then the child should position itself absolute to that parent element because of that. When I give .person div a crazy top, it still manages to break out of the parent div. Why is that? Thanks for any feedback.

Upvotes: 1

Views: 496

Answers (1)

brent-franklin
brent-franklin

Reputation: 61

I checked your code and it seems to be working fine, it's just on the .person you have top:34rem;

If you set .person top:0rem; and change the #board's top:#rem to any other rem value, you will see the .person moving with the #board

Also, using absolute position removes that element from the document workflow, so you can place it anywhere you like on the page. Negative values work as well. The only thing is, it looks for the first non-static element (the default position for elements) as a place to start, so you can use that one as a marker instead of the window itself. If you didn't put relative on the #person and had no other non-static elements surrounding it, it would go to the outermost element and basically use the webpage as the marker for its initial positioning. Since you used relative it starts its absolute positioning there because it is the first non-static element. You can still move it anywhere, it just starts there though.

Upvotes: 1

Related Questions