Position elements both left and right

Question

Is there something about CSS that doesn't allow you to specify both top and bottom or left and right values?

Take this example:

div {
  width: 100px;
  height: 100px;
}
.first {
  background-color: blue;
  position: relative;
  left: 100px;
  right: 50px;
}
.second {
  background-color: yellow;
}

<div class="first"></div>
<div class="second"></div>

Try removing right: 50px and the position will remain the same. What's going on?

Answer 1

In your example, the element has a fixed width to 100px and you are specifying both left and right properties. On MDN, you can read (emphasis mine) :

When both the right CSS property and the left CSS property are defined, the position of the element is overspecified. In that case, the left value has precedence when the container is left-to-right (that is that the right computed value is set to -left)[...]

So in your example the right value is ignored. For the bottom property, the same rule applies as the element's height is fixed.

Note that this rule only applies for non static positioning