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

时光总嘲笑我的痴心妄想 提交于 2019-12-23 03:43:11

问题


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.



来源:https://stackoverflow.com/questions/13393859/is-position-static-identical-to-position-relative-with-no-other-properties-sp

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!