当提供非零无单位值(例如,底部)时,固定定位如何工作?

How does fixed positioning work when a non-zero unitless value is provided (for say, bottom)?

我理解当底部、顶部、右侧和左侧的值以像素为单位时,定位通常是如何工作的。

阅读 another question,我还了解到值 0 等同于 0px、0em 等,因为零值不需要单位。

问题: 我不明白的是无单位非零值指定什么?例如,在 this 演示中,底部最初设置为 0。如果我更改值并将其设置为 bottom:1 或任何数值,如 bottom:786,绿色框将位于尽可能高(即,刚好低于其余内容)而不与页面上的其他内容重叠。

那么,bottom, top, left, right 这些非零数值分别对应什么?当提供这样的值时,浏览器如何定位这些元素?

Html 旨在忽略格式错误的代码,所以我的猜测是浏览器正在为您插入一个单元(可能 px)或 忽略 属性完全.

属性的 w3 规范在这里:http://www.w3.org/TR/CSS21/propidx.html 如果滚动到 bottom,您会看到接受的属性是 lengthpercentageauto继承

长度 规范说:

The format of a length value (denoted by length in this specification) is a number (with or without a decimal point) immediately followed by a unit identifier (e.g., px, em, etc.). After a zero length, the unit identifier is optional.

因此单位标识符仅在长度为 0 之后是可选的。

Brian D 已经回答了问题的第一部分,因此我不会详细介绍。简而言之,当您为 属性 提供非零且无单位的值时, 它是无效的 因此浏览器只是忽略它并将其视为根本不存在。

现在,来到问题的第二部分,关于为什么 bottom:1bottom:786(或任何其他值)的结果相同输出,这是因为当你不为 bottom 赋值时,它的值变成了默认值 auto。在这种情况下,您还没有为 top 分配任何显式值,因此它的值也变为 auto.

根据CSS Positioning Spec

If all three of top, height, and bottom are auto: First set any auto values for margin-top and margin-bottom to 0, then set top to the static position, and finally apply rule number three below.

从上面的语句可以看出,当三个(heighttopbottom)都是auto时,浏览器设置top 到静态位置,这意味着它没有以任何特殊方式定位,它只是跟随页面的流程。这就是为什么不管给出什么数字(单位减值),它总是停留在内容的第一部分下方(所有这些也有静态定位)。