css - 相对于 position: absolute 的 CSS 定位属性是什么？

Question

我知道 , bottom,top和leftwithright将position: absolute元素的边缘设置为与父元素的边缘相距一段距离。但是父节点的边缘是如何定义的呢？它在盒子模型中的什么位置？它包括边框还是边距？填充物？

Answer 1

它在边界内，但忽略填充。

让我们用一个例子来展示它。在 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 没有设置位置，则小提琴的主体将用作该父级。