You need to use margin instead of top. The top property moves the element, independent of document flow and essentially keeps the elements original position in the document flow, rather than affecting it.

.x {
  background-color: purple;
}

.a {
  height: 300px;
  background-color: green;
}

.b {
  height: 300px;
  background-color: red;
  
  position: relative;
  margin-top: -50px;
}

<div class="x">
  <div class="a"></div>
  <div class="b"></div>
</div>

I want to translate an element upwards and cause the document flow to shift as well. In this example:

https://codepen.io/jauhar/pen/JjomyzO

<div class="x">
  <div class="a"></div>
  <div class="b"></div>
</div>

.x {
  background-color: purple;
}

.a {
  height: 300px;
  background-color: green;
}

.b {
  height: 300px;
  background-color: red;

  position: relative;
  top: -50px;
}

I shifted an element upwards to overlap, however I would like the document to end at the element’s new position. In other words, the purple part should not show in the example.