当使用position:absolute时,默认的top,left,botton或right值是什么？
在一个大项目中,很少有按钮在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元素的最终定位的样子:
Bol*_*ock 34
如您所料,所有这些属性的初始值都不是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'将'左'设置为静态位置并在下面应用规则编号3; 否则,将"右"设置为静态位置并应用下面的规则1.
[...]
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',那么高度是基于每10.6.7的内容,设置'margin-top'和'margin'的'auto'值-bottom'到0,并解决'底部'
- 九年后了，这是我第一次找到此信息。关于绝对位置的每一篇文章都会讨论如何相对于定位的祖先移动事物，但这个信息帮助我简化了我的标记。让我们用更深的定位块将某个东西定位在其父级的高度。再次感谢你 (5认同)
- 谢谢。我不知道该找什么。太棒了。 (2认同)