一つ教えてください。

.container {
  width: 400px;
  margin: 32px auto 0;
  border: 8px solid blue;
  position: relative;
}

.box-1 {
  width: 100px;
  height: 100px;
  background-color: pink;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
}

.container に position、.box-1 には position と top、leftを上記のように書き、
.box-2 と、.box-3 について position 関係の設定を何もしなかったとしたら、
下の画像のように .container の border の左上に .box-1 がきっちりと配置される点については理解いたしました。

ですが、講義にあるように、全ての box に position 設定をした場合、
.container の border と .box-1 が上部分については重なり合っており、
下の画像のように左部分は余白が生じています。

.container の border と .box-1 の位置関係に何故違いが生じるのかわかりません。
.box-1 に関する、CSS の設定は同じはずなので。

よろしくお願いします。