Who wins out of css top/bottom?

Question

If you have a div that sits at the 'bottom' like so:

<div id="box" style="position: absolute;width: 10px;height: 10px;bottom: 0px;"></div>

and then if you were to change the position using 'top'...

$('#box').css({'top':'0px'});

what happens to the 'bottom' css command and what decides who (top or bottom) wins?

Should I cancel bottom somehow at the same time as setting top?

Ideas:

$('#box').css({'top':'0px','bottom','none'});
$('#box').css({'top':'0px','bottom',''});

It never occurred to me before

Answer 1

The interactions between width, height, and box offsets in a variety of scenarios in CSS are all detailed in section 10 of the spec.

Since your element is absolutely positioned, refer to section 10.6.4, which says:

For absolutely positioned elements, the used values of the vertical dimensions must satisfy this constraint:

'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block

If all three of 'top', 'height', and 'bottom' are auto, set 'top' to the static position and apply rule number three below.

If none of the three are 'auto': If both 'margin-top' and 'margin-bottom' are 'auto', solve the equation under the extra constraint that the two margins get equal values. If one of 'margin-top' or 'margin-bottom' is 'auto', solve the equation for that value. If the values are over-constrained, ignore the value for 'bottom' and solve for that value.

In your case, because the values are over-constrained once you set a value for top, top wins.

Note that setting none won't work because it's not a valid value for bottom, and setting the empty string reverts it to its default value which for most if not all elements is auto, which does not result in over-constrained values.

Answer 2

Top "wins" when all three of top, bottom and height are present - MDN:

...the top property overrides the bottom property, so if top is not auto, the computed value of bottom is the negative of the computed value of top.