CSS絕對定位的原點：是在border上、padding上還是在content上？

用了那么久的絕對定位，卻一直沒在意一個問題，就是絕對定位的原點，究竟是在盒模型的哪一處。今天想到這個問題，直接搜索沒有找到標准文檔，也沒有搜索到相關的問題，於是決定自己動手實現一下看看，並把這個結果發出來讓搜索引擎的內容變得更充實點。

代碼

<div id="d1">
  <div id="d2"></div>
</div>

body {
  background-color: black;
}
#d1 {
  width: 300px;
  height: 300px;
  margin: 40px;
  border: 40px solid red;
  padding: 40px;
  position: relative;
  background-color: #eee;
}
#d2 {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
  background-color: yellow;
}

最終效果(在chrome 59下)

之后換了火狐、IE瀏覽器，以及設置box-sizing分別為border-box和content-box，定位的效果也是這樣。

總結

從結果中可以看到，絕對定位的子元素緊緊貼着父元素的內邊框，所以絕對定位的原點是在padding的左上角。