i’ve been using a lot of absolute positioning and although I can usually get what i want with a bit of messing around i can’t see how the offsets are meant to work -
what is the difference between an object being positioned top left/top right and top? and further still, why is it that if i position an object to the top right and use the left arrow slider ithe object reappears to left and is now relative only to top?
why can i only use certain arrows on the positioning when others will radically change the positioning (as above) and others don’t work at all?
why does this ‘remember’ the offsets? surely if i want something positioned relative to the top left, then i change my mind and choose top right, it should reset the offsets?
I’ll try to answer but I’ll be happy to learn more if someone is more knowledgable.
Absolute positioning get out of the document flow. This is why it need a parent set to relative (otherwise it will be the document) so it can calculate properly its coordinates.
Regarding the positioning itself it is calculated edge to edge. Top of parent to top of absolute positioned child. Bottom to bottom etc…
If I got it well the width and height property of the element got priority over the positioning.
Let’s say you have a div set to 30px/w 30px/h and try to put 0px/left 0px/right it will stay on the left.
Why left because we read (most of us) left to right. If you change the texte direction it will take over as a priority. And why top? Because we all read (flow) from top to bottom.
But let says we don’t give it any size. If you do 0 to all side it will take the full size of the parent.
Same thing as doing 100% width 100% height? Not really.
Let say you want some precise padding of an absolute positioned element regarding it’s parent like 10px.
If you don’t know the size of the parent how do you make it 10px from right and 10px from bottom with %?
I hope it can help you. Sorry if it’s not super clear in the way i put it.
The two answers before mine are good answers but I can help a little, If you are serious and literal in your question:
Last paragraph. to reset as described click inside numbers at top and left backspace or delete until all #'s are gone, then hit enter. This resets to blank. Then proceed with next setting.
2nd paragraph : In Webflow top and Right or left seem to Do much the same in Desk top view. But check out tablet and phone before concluding that they actually are the same.
3rd When one of the arrows is not working it is because it’s opposite has not been reset (see answer to “Last paragraph” above).
I hope you wanted this help.