html - 顶部、底部、右侧、左侧位置属性的默认值

Question

position属性的top,bottom,left,right默认值为auto，请问user agent是如何计算auto的，这些值是多少？

Answer 1

以top为例，来自https://developer.mozilla.org/en/docs/Web/CSS/top

For absolutely positioned elements (those with position: absolute or position: fixed), it specifies the distance between the top margin edge of the element and the top edge of its containing block.

因此，对于绝对定位的元素，top: auto 意味着元素当前的位置，并且可以受 bottom 属性的影响。

For relatively positioned elements (those with position: relative), it specifies the amount the element is moved below its normal position.

因此，top: auto 对于相对定位的元素，它意味着相对于其原始位置的偏移量，也基于 bottom 属性。如果两者都设置为自动，那么它不会抵消任何东西

这对于底部是相同的，但相反，然后对于左/右关系也是类似的。

来自 http://vanseodesign.com/css/auto-positioning/

The default value for the top, right, bottom and left properties is auto, which means the absolutely positioned box will appear exactly where it would have had if it wasn’t positioned. Since it’s removed from the flow it will overlap any elements in the normal flow that follow it, though.

另外值得注意的是:

When both top and bottom are specified, as long as height is unspecified, auto or 100%, both top and bottom distances will be respected. Otherwise, if height is constrained in any way, the top property takes precedence and the bottom property is ignored.