geoyws geoyws - 6 months ago 8
CSS Question

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/EKqWjQ

Answer

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.

Comments