CSS Why left rule is given precedence over right rule when there’s a width?

Question

I have this CSS code:

#div1{
 height:200px;
 width:200px;
 background-color:red;
 position:absolute;
 right:30px !important; 
 left:0px;
 }

Answer 1

Having done some more research, the following will answer your question: http://www.w3.org/TR/css3-positioning/#abs-non-replaced-width

If all three of ‘left’, ‘width’, and ‘right’ are ‘auto’: First set any ‘auto’ values for ‘margin-left’ and ‘margin-right’ to ‘0’. Then, if the ‘direction’ property of the element establishing the static-position containing block is ‘ltr’ set ‘left’ to the static position and apply rule number three below; otherwise, set ‘right’ to the static-position and apply rule number one below.

If none of the three is ‘auto’: If both ‘margin-left’ and ‘margin-right’ are ‘auto’, solve the equation under the extra constraint that the two margins get equal values, unless this would make them negative, in which case when direction of the containing block is ‘ltr’ (‘rtl’), set ‘margin-left’ (‘margin-right’) to ‘0’ and solve for ‘margin-right’ (‘margin-left’). If one of ‘margin-left’ or ‘margin-right’ is ‘auto’, solve the equation for that value. If 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.

Otherwise, set ‘auto’ values for ‘margin-left’ and ‘margin-right’ to ‘0’, and pick one of the following six rules that apply.

If ‘left’ and ‘width’ are ‘auto’ and ‘right’ is not ‘auto’, then the width is shrink-to-fit. Then solve for ‘left’.

If ‘left’ and ‘right’ are ‘auto’ and ‘width’ is not ‘auto’, then if the ‘direction’ property of the element establishing the static-position containing block is ‘ltr’ set ‘left’ to the static-position, otherwise set ‘right’ to the static-position. Then solve for ‘left’ (if ‘direction is ’‘rtl’‘) or ’right' (if ‘direction’ is ‘ltr’).

If ‘width’ and ‘right’ are ‘auto’ and ‘left’ is not ‘auto’, then the width is shrink-to-fit. Then solve for ‘right’.

If ‘left’ is ‘auto’, ‘width’ and ‘right’ are not ‘auto’, then solve for ‘left’.

If ‘width’ is ‘auto’, ‘left’ and ‘right’ are not ‘auto’, then solve for ‘width’.

If ‘right’ is ‘auto’, ‘left’ and ‘width’ are not ‘auto’, then solve for ‘right’.