First off, static positioning ignores the top
value so I think your question is a bit confused. If what you meant to ask about was position:relative
, then here's an answer that addresses that.
Generally, I consider it much better to use margins and padding to position elements relative to their neighbors rather than relative positioning (which is what I assume you're really asking about since static positioning ignores the top
value).
Relative positioning or negative margins can cause overlapping objects and that is rarely what I want and can lead to some issues with event routing, borders, backgrounds, etc... if that isn't explicitly what you want. I do you position:relative
as a container for children that are position: absolute
, but pretty much never use it for moving an element all by itself as borders and padding are nearly always cleaner for that.
As to the extra part of your question about what does margin do, you should probably do a little search and then some reading as a few diagrams would probably really help you visualize this. Margin is an outer set of pixels around an object. Inside the margin is the border. Inside the border is the padding and inside the padding is the content. So the margin is the number of pixels around the object that is outside the border and the padding is the number of pixels between the border and the content of the object.
If you have no border specified, margins and padding provide very similar effects except that margins of neighboring objects are sometimes collapsed (e.g. combined into a single margin), but padding is never combined that way and the background extends to the border, but not under the margin.
Here's a StackOverflow question/answer on margins vs. padding that provides some other useful references: When to use margin vs padding in CSS
Here's a good article about the CSS box model which covers margin and padding