Why my position: absolute act like "relative"

Question

I am practicing CSS right now. Here is my codepen test playground: https://codepen.io/Riederlee/pen/MWWdWvP . As you can see the position: absoluteis not working. The sqaures act like relative in this case. What is the problem?

Here is the code:

HTML:

<div class="parent">
  <div class="A"></div>
  <div class="B"></div>
</div>

CSS:

.parent {
  position: absolute;
}

.A {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
}

.B {
  width: 100px;
  height: 100px;
  position: absolute;
  left: 10px;
  background-color: blue;
}