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

【问题标题】：What are the CSS positioning properties relative to with position: absolute?相对于 position: absolute 的 CSS 定位属性是什么？
【发布时间】：2013-01-04 23:22:15
【问题描述】：

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

【问题讨论】：

我认为是内部填充。
我想把一个 jsFiddle 放在一起或查看规范对你来说太麻烦了。
把它放在你的 CSS 中：*{border: 2px dashed red;} 这样你就可以准确地看到你的页面是如何构建的，只是有点混乱。对不同的元素使用不同的颜色来检查哪个元素有哪个边框。此外，您可能想查找有关盒子模型的文档。这个问题太笼统了，你在找什么教程吗？

标签： css position positioning

【解决方案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 没有设置位置，则小提琴的主体将用作该父级。

【讨论】：