html - 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;
 }

I want to ask why left:0px; overrides right:30px !important and not the opposite. Or the one with !mportant should override the other, that sounds more logical to me.

As PaulD.Waite pointed out it’s more that the left and width rules override the right rule.

So the real question is

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

FIDDLE

Answer 1

Just to show that the browser is w3c compliant:

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.

So, if we set direction right to left

body  {
    direction: rtl;
}

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

Now left is ignored:

fiddle