【读CSS规范】关于静态位置

Question

在计算绝对定位的不可替换元素的宽度和外边距时，规范先提出了一个“静态位置”的术语，并继续解释：

The static-position containing block is the containing block of a hypothetical box that would have been the first box of the element if its specified 'position' value had been 'static' and its specified 'float' had been 'none'.

个人的翻译：静态位置包含块是position为static且float为none的元素的第一个盒即假想盒的包含块。

参考了几个翻译，大致如此。其中有几个问题希望有人帮忙解释：

1. “第一个盒”——为什么强调“第一个”，除了li，都只生成一个盒吧？

2. 根据引用，静态位置应该指的就是假想盒，为什么会让“位置”等同于“盒”呢，用“静态盒”不是更易于理解么？或者是我的理解有问题？

3. 静态位置及静态位置包含块的作用有没有例子说明下（对此问题规范中后文有所解释，但引用的这句已经让我云里雾里了，所以还是提了出来。。。）

再次感谢！

Answer 1

这么翻译没错但不是我们正常的说话方式，也把你给绕进去了。把从句切分为两段：

静态位置包含块是一个假想盒的包含块，这个假想盒是指当假设这个元素 position 为 static 且 float 为 none 时生成的第一个盒子。

1. 强调第一个是指最上最左（lrt 方向下），无论一个元素生成几个盒子，总有第一个对吧。

2. 看回正常的语序你就会发现，“位置”并没有等同于“盒”，静态位置包含块是指在静态位置的包含块。

3. 这个位置用于给 top left 计算默认值。其实这段话不理解也没关系的，因为就在前一句就说了

   the term "static position" (of an element) refers, roughly, to the position an element would have had in the normal flow.

   不是实现规范的话知道它的默认位置是假设在 normal flow 时的位置就行。例子你在一个不设 top left bottom right 的 absolute 元素前放几个 in-flow 元素就可以观察到。

Answer 2

1. 规范表达严谨, 不必纠结

2. 说话比较绕而已, static position 是名词静态位置, static-position 是形容词静态位置的, 一个盒如何定位需要参照其包含块, 静态位置是盒的假想位置, 其定夺依赖于我们假设盒处于静态位置时它的包含块, 而这个包含块就被叫做静态位置的包含块. 位置和盒本身就是紧密联系的相互关系, 在讨论定位的时候, 粗略地把它们等同起来也是可以的.

3. 例子: https://codepen.io/HaoyCn/pen...

这个例子中, .absolute 的水平方向位置保持了其静态位置, 是相对于其静态位置包含块 .parent 来计算的; 而垂直方向上的位置则是相对其实际绝对定位包含块 .relative 来计算的.