Who Wins Out Of Css Top/bottom?

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

and then if you were to chan

Solution 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.

Solution 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.