What happens when you use left and right (or top and bottom) at the same time is confusing because the spec [6.3. Absolute positioning] tells us that:
For absolutely positioned elements whose containing block is based on
a block-level element, this property is an offset from the padding
edge of that element.
So how can setting position affect the size of an element? The reason stems from how widths are calculated, which is buried in another section of the spec, [8.1. The width of absolute or fixed positioned, non-replaced elements].
If you specify both left and right and your element’s width is not auto, then what you are saying really doesn’t make sense, and right is ignored (all statements apply equally well to top/bottom/height):
If none of left/right/width is auto…the values are over-constrained, ignore
the value for left (in case the direction property of the containing
block is rtl) or right (in case direction is ltr) and solve for that
value.
But if your element has no width set, or width is (the default) auto, this rule kicks in:
If width is auto, left and right are not auto, then solve for width.
Finally, the equation given that determines the values for these elements is:
‘left’ + ‘margin-left’ + ‘border-left-width’ + ‘padding-left’ +
‘width’ + ‘padding-right’ + ‘border-right-width’ + ‘margin-right’ +
‘right’ = width of containing block
We can clearly see that after plugging in our values for left and right and the others, width is the unsolved (and unconstrained) variable, which will turn out to be width of containing box - left - right (more or less) or to put it another way: “fill in the space between the offsets”.