Абсолютный элемент, переполняющий документ

Проблема здесь в overflow, а не в документообороте. Если мы обратимся к спецификация:

Generally, the content of a block box is confined to the content edges of the box. In certain cases, a box may overflow, meaning its content lies partly or entirely outside of the box, e.g.:

...

A descendant box is positioned absolutely, partly outside the box. Such boxes are not always clipped by the overflow property on their ancestors; specifically, they are not clipped by the overflow of any ancestor between themselves and their containing block

....

Вы можете заметить, что нет другого позиционированного элемента, кроме child, поэтому содержащий блокchild будет окном просмотра. И уловка здесь в том, что полоса прокрутки всегда добавляется к содержащему блоку, начиная слева (горизонтальная прокрутка) или сверху (вертикальная прокрутка), поэтому любое переполнение сверху или слева станет недоступным.

Вот иллюстрация, чтобы лучше понять проблему:

.parent {
  width: 100%;
  height: 100vh;
  border: 1px solid red;
  background-color: magenta;
  box-sizing:border-box;
}

.child {
  position: absolute;
  width: 100px;
  height: 50%;
  border: 1px solid black;
  left: 0;
  background-color: yellow;
  animation:move 3s infinite linear alternate;
}
@keyframes move{
  from {left:-100px}
  to {left:100%}
}

body {
 margin:0;
}

<div class = "parent">
  <div class = "child"></div>
</div>

Как видите, прокрутка есть только при переполнении элемента слева. Та же логика, если рассматривать верх / низ

.parent {
  width: 100%;
  height: 100vh;
  border: 1px solid red;
  background-color: magenta;
  box-sizing:border-box;
}

.child {
  position: absolute;
  width: 100px;
  height: 50%;
  border: 1px solid black;
  left: 0;
  background-color: yellow;
  animation:move 3s infinite linear alternate;
}
@keyframes move{
  from {top:-100px}
  to {top:100%}
}

body {
 margin:0;
}

<div class = "parent">
  <div class = "child"></div>
</div>

И чтобы подтвердить, что ваш элемент действительно удален из потока, просто добавьте контент и удалите фиксированную высоту из родительского элемента, и вы увидите, что для вашего элемента не предусмотрено места:

.parent {
  border: 1px solid red;
  background-color: magenta;
  position: relative;
  box-sizing:border-box;
}

.child {
  position: absolute;
  width: 100px;
  height: 50%;
  border: 1px solid black;
  top:0;
  left: 0;
  background-color: yellow;
  animation:move 3s infinite linear alternate;
}
@keyframes move{
  from {left:-100px;top:-100px;}
  to {left:100%;top:100%;}
}

body {
 margin:0;
 border:2px solid red;
}

<div class = "parent">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget maximus nibh. Nam non libero molestie, placerat lorem sed, congue arcu. Aliquam eu ultrices nisi, sed facilisis purus. Suspendisse sit amet tincidunt massa, varius tempor mi. Suspendisse semper finibus ipsum in varius. Maecenas id commodo mi, vitae molestie diam. Nulla a risus cursus, auctor ligula sit amet, vestibulum purus. In in turpis non mi auctor viverra porta ac magna.
  <div class = "child"></div>
</div>

В отличие от position:relative:

.parent {
  border: 1px solid red;
  background-color: magenta;
  position: relative;
  box-sizing:border-box;
}

.child {
  position: relative;
  width: 100px;
  height: 50px;
  border: 1px solid black;
  top:0;
  left: 0;
  background-color: yellow;
  animation:move 3s infinite linear alternate;
}
@keyframes move{
  from {left:-100px;top:-100px;}
  to {left:100%;top:100px;}
}

body {
 margin:0;
 border:2px solid red;
}

<div class = "parent">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras eget maximus nibh. Nam non libero molestie, placerat lorem sed, congue arcu. Aliquam eu ultrices nisi, sed facilisis purus. Suspendisse sit amet tincidunt massa, varius tempor mi. Suspendisse semper finibus ipsum in varius. Maecenas id commodo mi, vitae molestie diam. Nulla a risus cursus, auctor ligula sit amet, vestibulum purus. In in turpis non mi auctor viverra porta ac magna.
  <div class = "child"></div>
</div>

Почему этого не происходит с position:fixed? просто потому, что в спецификация ничего не указано. Вот все случаи переполнения:

• A line cannot be broken, causing the line box to be wider than the block box.
• A block-level box is too wide for the containing block. This may happen when an element's 'width' property has a value that causes the generated block box to spill over sides of the containing block.
• An element's height exceeds an explicit height assigned to the containing block (i.e., the containing block's height is determined by the 'height' property, not by content height).
• A descendant box is positioned absolutely, partly outside the box. Such boxes are not always clipped by the overflow property on their ancestors; specifically, they are not clipped by the overflow of any ancestor between themselves and their containing block
• A descendant box has negative margins, causing it to be positioned partly outside the box. The 'text-indent' property causes an inline box to hang off either the left or right edge of the block box.