DEV Community


Posted on

Is setting position of elements relative or absolute elements to move left, right, top, bottom correct

To make elements move left, right, top, bottom I have to set position property to relative or absolute but when I resize the window, I see elements are rearranged incorrect way. I want to move elements left, right, top, bottom as well on window resize element to show in correct manner. How to achieve this?

Top comments (1)

brandinchiu profile image
Brandin Chiu

Whenever you use top, left, bottom, or right css properties, you are telling that element that you want to move it some distance in pixels in that direction.

The question you need to ask is how does it know where 0,0 is in order to move effectively?

If I were to tell you to move 10 spaces to the right, the next natural question would "10 spaces from where?".

This is where your positioning comes in.

In order for css to be applied properly, it needs to have a reference point. We do that by setting the position attribute of the parent element to relative.

This means that our position: absolute; right: 10px; element knows that it's 10px from the location (x/y) of that parent.

So long as the parent doesn't move when your page resizes, neither should your manually positioned element.