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>
According to the documentation :
More info
I hope to be of help, regards
These properties allow you to define the displacement of the position of an element with respect to a coordinate origin and the coordinate origin that is taken, and the only values it accepts are relative and absolute.
Relative position: They define how much the element is displaced with respect to what its normal position would be.
Absolute or fixed position: They define how much the element moves with respect to the origin coordinates.
It doesn't make sense to use top and bottom at the same time, because it would say that the element goes up and down. You must use only one of these two properties. Same for right and left.