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

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