Wait, adding top / left doesn’t work in all cases. There are times when margin is needed.
If you have a hosting account anywhere you can upload a page to share it. If you don’t have a hosting account, you could use GitHub Pages or something similar.
Alternatively, if you just want to share the page here, you can simply upload it to your post, or even just copy and paste the entire page.
What do you mean by that?
What’s unclear about it? If you want to share an HTML page here and can find no other way to do it, you can just copy and paste the whole code, starting with the doctype, so others can use that to reproduce the page in question.
oh, ok.
I never included doctype before, only the code.
Top and left work in all cases for positioned elements.
It doesn’t work with this code.
You can’t use top / left instead of margin.
Which positioned element does it not work for?
I only see 2 positioned elements in that page and neither have margins applied to them or co-ordinates.
If you are talking about the svg elements then none of them are positioned so your question makes no sense.
Only positioned elements can have co-ordinates applied (which is what the original question was about). Positioned elements are position:absolute; position:relative or position:fixed. They each have their own rules but we were specifically talking about absolute elements. If the elements are not positioned then they are called static elements (that’s the default i.e. position:static). Top,left, right and bottom values do not apply to static elements.
Absolute elements are removed from the flow so margins don’t have any effect on surrounding elements like normal static elements. On a positioned element they may move the element itself which may be useful for auto positioned elements but comes with a whole range of problems that need a good understanding of css to take into consideration. Co-ordinates on the other hand do exactly what they say on the tin and will move an element in respect to its nearest positioned ancestor exactly and with no caveats.
Margins on static elements on the other hand move the element away from other elements or push elements away from them (depending if the element is before or after the current element). The rules for margins are complicated and collapsing margins and formatting contexts all need to be understood to fully utilise them properly.
You don;t however seem to be taking any of this on board as we have been over all these issues many times and while the context can be complex the rules need to be learned:)
5 Likes
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.