Why Does The Default Left: Auto; In Absolute Positioning Not Align To The Left Of The Relative Element Unless Set To 0?

Can anyone point me to specs and clarify this for me? If I don't set left to 0, it won't align. Why doesn't it just align at the default auto value? http://codepen.io/geoyws/pen/EK

Solution 1:

The CSS spec says, for the width of absolutely positioned, non-replaced elements:

The static position for 'left' is the distance from the left edge of the containing block to the left margin edge of a hypothetical box that would have been the first box of the element if its 'position' property had been 'static' and 'float' had been 'none'

...

If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, [...] set 'left' to the static position

The static position will be after the left padding of the .button div.

Solution 2:

It happens because by default most of the html elements has specific margin or padding properties. Here in this case When you set its left property to '0', there it resets itself and removes all the pre-define property values.

Thats the reason it aligns perfectly to '0' and not to 'auto'.