Trouble understanding why element isn't positioned relative to parent?

Question

I have 2 elements in the container, one relative and one absolute. I centered them both as well using margin: auto. The first element is relatively positioned, so it doesn't move, which I understand.

However, for the second element, it being absolutely positioned, shouldn't it move to the top-left corner of the container? I thought it removed the element from the flow of the document and moved relative to the parent element, which is .container , so I'm confused why it's being positioned under the first element.

I read the mdn docs for this...but perhaps I am not understanding the wording?

Essentially, I thought my second box would fit on the same row as the first box, just in the corner, on the left.

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;
}

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