相对于position的CSS定位属性是什么：绝对？

Question

我知道bottom，top，left和right与position: absolute将元素的边缘设置为距离边缘一定距离父元素。但是如何定义父级的边缘？盒子模型在哪里？它是否包括边界或边际？填充？

Answer 1

它在边框内，但忽略了填充。

让我们用一个例子来展示它。 View on JSFiddle

HTML

<div>
  <span>absolute</span>
  regular
</div>​

CSS

div {
  position: relative;
  top: 50px;
  left: 50px;
  background: #eee;
  padding: 15px;
  width: 100px;
  height: 100px;
  border: 5px solid #222;
}
span { 
  position: absolute;
  top: 0;
  left: 0;
}​

当然，一个绝对定位的元素相对于它遇到的第一个父元素定位，它与静态以外的任何东西定位。如果我的示例中的div没有设置位置，则小提琴的主体将用作该父级。