当使用position:absolute时，默认的top、left、bottom或right值是什么？

Question

当使用position:absolute时，默认的top、left、bottom或right值是什么？

29

在一个大项目中，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元素最终定位的效果：

在此输入图片描述

- MartinTeeVarga

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- BoltClock · Accepted Answer

如你所料，所有这些属性的初始值都不是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'，则将 'left' 设置为静态位置并应用下面的第三条规则；否则，将 'right' 设置为静态位置并应用下面的第一条规则。

1. 'left' 和 'width' 都为 'auto'，而 'right' 不是 'auto'，则宽度为收缩适应。然后求解 'left'。

还有 10.6.4：

对于绝对定位元素，垂直尺寸的使用值必须满足以下约束条件：

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

如果'top'、'height'和'bottom'这三个属性中有两个或三个都为auto，则将'top'设置为静态位置，并应用下面的规则三。

3. 当'height'和'bottom'都是'auto'且'top'不是'auto'时，高度基于每个10.6.7节的内容设置为按比例计算，将'margin-top'和'margin-bottom'的值设置为0，然后解决'bottom'。