CODEWITHSUNDEEP
csspositioncss-position
Don P
Don P

Reputation: 63597

Is position: static identical to position: relative, with no other properties specified?

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!

Upvotes: 3

Views: 1168

Answers (2)

Mr. Alien
Mr. Alien

Reputation: 157324

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

Upvotes: 6

Guffa
Guffa

Reputation: 700302

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.

Upvotes: 7

Related Questions