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

Question

我知道 bottom、top、left 和 right 具有 position: absolute 将元素的该边缘设置为距父元素的该边缘一定距离。但是 parent 的边缘是如何定义的呢？它在盒子模型中的什么位置？它包括边框或边距吗？填充？

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 没有设置位置，则 fiddle 的主体将用作该父项。