Lock an Element to its Parent with Absolute Positioning : Why using absolute positioning with right offset 50 px will move an element to the right instead of to the left?

HTML-CSS
1

I don’t understand why the searchbar moves to the right instead to the left. I thought offset means pushing an element FROM the direction

If the offset is right, then it’s pushed from the right, which means the element moves to the left.

However, the element searchbar moves to the right when offset is right

2

Well it quite depends from where it starts. If it starts from 150px on the left, that means it’s going to shift it to the right first, then move it 50px. So what it does is move the element TO the direction, so if it’s from the left, and you set the offset to be right, it’s going to move it to the Right

image
image1373×642 65.2 KB

Then it’s going to use the offset value, so it’s going to shift it to the left 50px.
image
image1366×642 63.8 KB

1 Like
3

It IS pushed from right.

If it was right: 0, then the right border of searchbar would be touching the right side.
If it was left: 0, then the left border of searchbar would be touching the left side.

If you give either one of those values,. it’s a distant of X px FROM their left/right property.

1 Like