24

在一个大项目中，IE 中很少有按钮错位。我偶然发现了一个修复，通过设置position: absolute没有任何参数。这让我想知道，这种位置的默认值是什么？我了解绝对定位的工作原理以及包含元素的含义。但我不知道默认值来自哪里。它们绝对不是top:0; left:0我最初预期的。

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
position:absolute;
}
</style>
</head>

<body>
<h1>Absoulute pos</h1>
<p>Paragraph</p>
</body>

</html>

这是一个简单的页面，h1 元素的最终定位如下所示：

在此处输入图像描述

4

1 回答 1

45

正如您所怀疑的，所有这些属性的初始值都不是0; 它是auto。您可以在规范的第 9.3.2 节中找到它们的属性定义。

当一个绝对定位的盒子保持它的所有偏移量auto（即你不修改它们）时，它不会去任何地方。它保持在静态位置，这基本上意味着它在布局中的通常位置，如果它根本没有定位的话。第 10 节包含所有细节（它甚至有整段解释“静态位置”的含义），但您需要关注10.3.7：

确定这些元素使用值的约束是：

'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right ' = 包含块的宽度

如果'left'、'width'和'right'这三个都是'auto'：首先将'margin-left'和'margin-right'的任何'auto'值设置为0。然后，如果'direction'建立包含静态位置的块的元素的属性是“ltr”，将“左”设置为静态位置并应用下面的规则三；否则，将“right”设置为静态位置并应用下面的第一条规则。

[...]

1. 'left' 和 'width' 是 'auto' 而 'right' 不是 'auto'，那么宽度是收缩到适合的。然后求解“左”

和10.6.4：

对于绝对定位的元素，垂直尺寸的使用值必须满足这个约束：

'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom ' = 包含块的高度

如果'top'、'height'和'bottom'这三个都是自动的，则将'top'设置为静态位置并应用下面的规则三。

[...]

3. 'height' 和 'bottom' 是 'auto' 而 'top' 不是 'auto' 则高度根据 10.6.7 的内容，设置 'margin-top' 和 'margin' 的 'auto' 值-bottom' 为 0，并求解 'bottom'

于 2013-11-14T03:35:47.760 回答