Fixer Abstand von "absolut" positionierten Div's

Hallo 😃

Ich kämpfe mit folgendem Problem:

=> Ich habe:

<div class="absoluteWrapper">
     <div class="relative">
          <div class="absolute">absolute</div>
          <div class="absolute2">absolute2</div>
          <div class="absolute3">absolute3</div>
          <div class="absolute4">absolute4</div>
      </div>
</div>

Diese Elemente sind vertikal sowie horizonal zentriert.

Wenn man nun die Browsergrösse in der Höhe verkleinert, verschwinden die Elemente.

Wie kann ich ein absoluten Mindest-Abstand von "Oben" deklarieren ?

Habe eine Test-Seite erstellt:
Test-Seite Link

Herzlichen Dank für Inputs

Beste Grüsse

Diräkt

Edit: HTML Layout angepasst an Test-Seite
Edit2: Titel Typo

Die divs sind absolut positioniert und zwar bezüglich <div class="relative" >
Wenn dieses div aus der Seite raus geht, gehen die absoluten natürlich auch mit.
Dein Beispiel ist übrigens anders als die Seite.
Das was du suchst dürfte fix statt absolute sein.

Hallo Chilic

Herzlichen Dank für Deine Antwort!

Wenn dieses div aus der Seite raus geht, gehen die absoluten natürlich auch mit.

Das ist okay und auch gewollt so. Nur würde ich gerne ein Grenzwert definieren. ( Gilt solange der Abstand von ganz Oben mindestens 50px beträgt)

Ich könnte es mit JavaScript lösen àlà:

 $(window).resize(function () {
                onResize();
            });

Jedoch würde ich es viel lieber mit css gelöst sehen !

Beste Grüsse

Diräkt