right: 0;
And left: 0;
they're kind of in conflict.
How does the browser determine the final position that the element will take horizontally?
In the end, the value that wins is that of, left:0;
but do you have any explanation as to why this is so?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<div style="width:50px; height:50px; background: pink; position: fixed; left: 0; right: 0; top: 0;">
</div>
</body>
</html>