Positioning

position: absolute takes an element out of the normal flow of the page and positions it relative to its nearest positioned ancestor, meaning the closest element containing it whose position isn't static.

The whole trick is to put position: relative on the parent so it becomes the reference point, then put absolute on the child. Forget relative on the parent and the child ends up in the corner of the page.

Use inset-block-start and inset-inline-start instead of top and left. The logical properties follow the direction of the page and flip with it, while top and left stay the same whatever the direction.