当提供非零无单位值(例如,底部)时,固定定位如何工作?
How does fixed positioning work when a non-zero unitless value is provided (for say, bottom)?
我理解当底部、顶部、右侧和左侧的值以像素为单位时,定位通常是如何工作的。
bottom: 2px
会将框放在页面底部上方 2px 处。
- 同样
top: 2px
会将框放在页面顶部下方 2 像素处。
阅读 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
,您会看到接受的属性是 length、percentage、auto、继承。
长度 规范说:
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:1
或 bottom:786
(或任何其他值)的结果相同输出,这是因为当你不为 bottom
赋值时,它的值变成了默认值 auto
。在这种情况下,您还没有为 top
分配任何显式值,因此它的值也变为 auto
.
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.
从上面的语句可以看出,当三个(height
、top
、bottom
)都是auto
时,浏览器设置top
到静态位置,这意味着它没有以任何特殊方式定位,它只是跟随页面的流程。这就是为什么不管给出什么数字(单位减值),它总是停留在内容的第一部分下方(所有这些也有静态定位)。
我理解当底部、顶部、右侧和左侧的值以像素为单位时,定位通常是如何工作的。
bottom: 2px
会将框放在页面底部上方 2px 处。- 同样
top: 2px
会将框放在页面顶部下方 2 像素处。
阅读 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
,您会看到接受的属性是 length、percentage、auto、继承。
长度 规范说:
The format of a length value (denoted by
length
in this specification) is anumber
(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:1
或 bottom:786
(或任何其他值)的结果相同输出,这是因为当你不为 bottom
赋值时,它的值变成了默认值 auto
。在这种情况下,您还没有为 top
分配任何显式值,因此它的值也变为 auto
.
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.
从上面的语句可以看出,当三个(height
、top
、bottom
)都是auto
时,浏览器设置top
到静态位置,这意味着它没有以任何特殊方式定位,它只是跟随页面的流程。这就是为什么不管给出什么数字(单位减值),它总是停留在内容的第一部分下方(所有这些也有静态定位)。