Is position: static identical to position: relativ

问题:

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!

回答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

回答2:

Using position: relative without any positioning works the same as position: static for the element itself, but it makes difference for a child that has position: absolute.

An absolutely positioned element is placed relative to it's containing block, and the containing block is the closest parent that has a position setting other than static.