Question

Is position:static equivalent to position: relative with none of the top, bottom, right, or left properties specified?

I though of this because an element with postion: absolute be relative to the first element that does NOT have postion: static. It seems arbitrary to make an element with position: relative, which will behave identically to a position: static if no other properties are used. Figured I might be missing something about static vs relative.

Thanks!

Answer 1

The answer is no, both are different

position: static; means nothing but default position, you cannot use top, right, bottom, left unless and until you use position: relative, absolute or fixed, you need to use margins, moreover, position: relative; comes in real action when the child elements are positioned absolute, so that all elements can float inside the position: relative; div, if you just keep it static, they will go out of the document…

Take a look at the examples

Demo1 (Keeping the div static and using top, left has no effect)

Demo2 (Making it position: relative; does effect top, left)

Demo3 (Keeping the parent div static, child will flow out if it’s positioned absolute)

Demo4 (Child div positioned absolute will measure top, right, bottom, left from its parent div positioned relative)

This 1 is short and very simple but powerful tutorial video to clear out your doubts

And a short article on CSS positioning