当position：absolute被使用时，默认的top，left，botton或right值是什么？ [英] What are the default top, left, botton or right values when position:absolute is used?
问题描述
在一个大项目中，很少有按钮在IE中不对齐。我发现了一个巧合，通过设置 position：absolute 没有任何参数。它让我想知道，这样的位置的默认值是什么？我明白绝对定位的工作原理和含有元素的含义。但我不知道默认值来自哪里。他们绝对不是 top：0;
<！DOCTYPE html>
< html>
< head>
< style>
h1 {
position：absolute;
}
< / style>
< / head>
< body>
< h1> Absoulute pos< / h1>
< p>段落< / p>
< / body>
< / html>
这是一个简单的页面，这是h1元素的最终定位如何： p>
您怀疑，所有这些属性的初始值不是 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'到静态位置，并应用下面的规则号3;
$ b
$ b1。 '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'都是自动的，则将'top'设置为静态位置，并应用下面的规则三。
[...]
3。 'height'和'bottom'是'auto'，'top'不是'auto'，那么高度是基于每10.6.7的内容，将margin-top和margin-bottom的'auto'值设置为0，并求解底部
In a big project, few buttons were misalligned in IE. I found a fix by coincidence, by setting position: absolute without any parameters. It made me wonder, what are the default values of such position? I understand how absolute positioning works and what containing element means. But I don't know where the default values come from. They are definitely not top:0; left:0 which I originally expected.
<!DOCTYPE html>
<html>
<head>
<style>
h1 {
position:absolute;
}
</style>
</head>
<body>
<h1>Absoulute pos</h1>
<p>Paragraph</p>
</body>
</html>
Here is a simple page, and this is how final positioning of the h1 element looks like:
As you suspect, the initial values for all these properties is not 0; it is auto. You can find their property definitions in section 9.3.2 of the spec.
When an absolutely positioned box keeps all its offsets auto (i.e. you don't modify them), it doesn't go anywhere. It remains in the static position, which basically means its usual spot in the layout had it not been positioned at all. Section 10 has all the details (it even has entire paragraphs explaining what "static position" means), but you'll want to focus on 10.3.7:
The constraint that determines the used values for these elements is:
'left' + 'margin-left' + 'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' + 'margin-right' + 'right' = width of containing block
If all three of 'left', 'width', and 'right' are 'auto': First set any 'auto' values for 'margin-left' and 'margin-right' to 0. Then, if the 'direction' property of the element establishing the static-position containing block is 'ltr' set 'left' to the static position and apply rule number three below; otherwise, set 'right' to the static position and apply rule number one below.
[...]
1. 'left' and 'width' are 'auto' and 'right' is not 'auto', then the width is shrink-to-fit. Then solve for 'left'
And 10.6.4:
For absolutely positioned elements, the used values of the vertical dimensions must satisfy this constraint:
'top' + 'margin-top' + 'border-top-width' + 'padding-top' + 'height' + 'padding-bottom' + 'border-bottom-width' + 'margin-bottom' + 'bottom' = height of containing block
If all three of 'top', 'height', and 'bottom' are auto, set 'top' to the static position and apply rule number three below.
[...]
3. 'height' and 'bottom' are 'auto' and 'top' is not 'auto', then the height is based on the content per 10.6.7, set 'auto' values for 'margin-top' and 'margin-bottom' to 0, and solve for 'bottom'
这篇关于当position：absolute被使用时，默认的top，left，botton或right值是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
