计算“绝对定位，未替换元素”的宽度

Question

CSS 2.2 10.3.7 Absolutely positioned, non-replaced elements的规范说：

  

如果'left'，'width'和'right'都是'auto'：首先将'margin-left'和'margin-right'的'auto'值设置为0.然后，如果建立静态位置包含块的元素的'direction'属性是'ltr'将'left'设置为静态位置并在下面应用规则3;否则，将“右”设置为静态位置并应用下面的规则编号。

     

如果这三个中没有一个是'auto'：如果'margin-left'和'margin-right'都是'auto'，那么在额外约束条件下求解两个边距得到相等值的等式，除非这样做它们为负数，在这种情况下，当包含块的方向为'ltr'（'rtl'）时，将'margin-left'（'margin-right'）设置为零并求解'margin-right'（'margin-left “）。如果'margin-left'或'margin-right'中的一个是'auto'，则求解该值的等式。如果值过度约束，则忽略'left'的值（如果包含块的'direction'属性为'rtl'）或'right'（如果'direction'为'ltr'）并求解那个价值。

我正在玩这些规则。在一个案例中，我设置了left，right和width，而不是auto值，但我没有得到正确的值如何影响布局。对我而言似乎没有效果，例如right的使用值设置为0（0是我的猜测，因为浏览器devtool将值显示为5px）。任何人都可以解释我的猜测是否正确？如果没有，那么它是如何应用于布局的，因为我无法从上述规范的文档证明它。

.parent {
  width: 200px;
  height: 200px;
  background: #ffe;
  position: relative;
  border: 1px solid #999;
}
.child {
  background: #ee2;
  position: absolute;
  left: 5px;
  width: 100px;
  padding: 5px;
  right: 5px;
}

<div class="parent">
  <div class="child">
    I am positioned
  </div>
</div>

显示如下：

Answer 1

贴纸有MDN的版本。来自引文本身的文本的相关部分在最后一句中，这证实了MDN的解释（MDN只使用了Web开发人员可以更容易理解的不同术语）：

  

如果值过度约束，则忽略'left'的值（如果包含块的'direction'属性为'rtl'）或'right'（如果'direction'为'ltr'）并解决这个价值。

术语“过度约束”在第10.3.3节中定义：

  

如果以上所有都具有“auto”以外的计算值，则称这些值为“过度约束”，其中一个使用的值必须与其计算值不同。

Answer 2

MDN文章清楚地解释了这一点：

  

如果同时定义left和right，则元素的位置过度指定。在这种情况下，当容器从左到右时，left值具有优先权（因此，right的计算值设置为-left）;当容器从右到左时，正确的值具有优先权（因此，left的计算值设置为-right）。