向左和向右定位元素

Question

是否有关于 CSS 不允许您同时指定顶部和底部或左侧和右侧值的内容？

以这个例子为例：

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>

尝试删除right: 50px，位置将保持不变。这是怎么回事？

Answer 1

在您的示例中，该元素的固定宽度为 100px，并且您同时指定了left和right属性。在MDN 上，您可以阅读（强调我的）：

当定义了右 CSS 属性和左 CSS 属性时，元素的位置被过度指定。在这种情况下，当容器从左到右时， 左值优先（即右计算值设置为 -left）[...]

所以在你的例子中，正确的值被忽略了。对于底部属性，同样的规则适用于元素的高度是固定的。

注意这个规则只适用于非静态定位

Answer 2

来自MDN：

当同时定义了右 CSS 属性和左 CSS 属性时，元素的位置被过度指定。在这种情况下，当容器从左到右时（即右计算值设置为 -left），左值优先；当容器从右到左时，右值优先（即是左计算值设置为-右）。