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的左上角。