[Vuejs]-Why does displaying text inside the document via transform: translateY(-100%) create extra white-space at bottom of page?

by

0👍

✅

A relative positioned element behaves as if it hadn’t been moved

By now I found out the answer myself.
I will post it in case someone finds this useful.

The goal was to always move the text-box inside the viewport.
However, in the style the show-box’s position was defined as position: relative; and only its direct parent show-text-wrap is absolutely positioned.

According to https://developer.mozilla.org/en-US/docs/Web/CSS/position a relative positioned element is offset relative to its original position.
This will not change the position of any other elements in the document.
This means that the layout of the document will behave as if the element was still at its original position.
Since the <show-box> originally reached beyond the <html> element such that the page was extended this is still the case regardless of the fact that the element appears moved into the document.

So in order to fix the problem change

.show-text {
  position: relative;
}

to

.show-text {
  position: absolute;
}

Leave a comment