难以理解为什么元素相对于父元素没有定位？

Question

我在容器中有2个元素，一个relative和一个absolute。我使用margin: auto将它们集中在一起。第一个元素是相对定位的，所以它不会移动，我理解。

然而，对于第二个元素，它是绝对定位的，不应该移动到容器的左上角？我认为它从文档流中删除了元素并相对于父元素移动了.container，所以我很困惑为什么它被定位在第一个元素下面。

我为此阅读了mdn文档......但也许我不理解措辞？

基本上，我认为我的第二个盒子与第一个盒子在同一行上，就在左边的角落里。

＆＃13;

＆＃13;

html, body {
  height: 100%;
  width: 100%;
}
.container {
  height: 500px;
  width: 500px;  
  border: 1px solid black;
  position: relative;
}
.box1 {
  height: 100px;
  width: 100px;
  background: blue;
  position: relative;
  margin: auto;
}
.box2 {
  height: 100px;
  width: 100px;
  background: red;
  position: absolute;
  margin: auto;
}

＆＃13;

<div class='container'>
  <div class='box1'>
  </div>
  <div class='box2'>
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;