Question

在一个大型项目中，很少有按钮在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元素的最终定位的样子：

enter image description here

Answer 1

如您所料，所有这些属性的初始值不是0;它是auto。您可以在规范的section 9.3.2中找到他们的属性定义。

当一个绝对定位的框保留其所有偏移auto（即你不修改它们）时，它不会去任何地方。它仍然处于静止位置，这基本上意味着它在布局中的通常位置根本没有定位。 Section 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'设置为静态位置并在下面应用规则3;否则，将“右”设置为静态位置并应用下面的规则编号。

[...]

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'都是auto，则将'top'设置为静态位置并在下面应用规则3。

[...]

3。 'height'和'bottom'为'auto'，'top'不是'auto'，然后高度为based on the content per 10.6.7，将'margin-top'和'margin-bottom'的'auto'值设置为0 ，并解决'底部'

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

1 个答案: