CSS Elemente mittels CSS positionieren?

[Dsimon24]

Moin zusammen!

Ich versuche gerade Puzzle-Teiler ineinander zu positionieren.
Verkleinere ich aber das Browser-Fenster erkenne ich ganz schell,
dass es so schon mal nicht geht (siehe Video). Ich habe es mit
'position: relative' und top/left/bottom/... versucht.

Habt ihr einen Tipp für mich, wie ich die Puzzle-Teile besser ineinander
positionieren kann - über verschiedene Browser-Größen hinweg?

Ein gesamtes Bild kann ich da leider nicht verwenden,
da jedes Element auch ein eigenen Link darstellt.

VG,

 

[netzgestaltung]

da würde ein jsfiddle oder ähnliches weiterhelfen. Hast du die top/left werte in % oder px oder vw/h angegeben?

 

[Dsimon24]

JSFiddle

Ich habe die Werte jetzt mal in % angegeben.
Das scheint auch besser zu funktionieren, aber:

Ich kann es nur nach rechts/links schieben,
nicht nach oben/unten

Ebenfalls sind die %-Angaben zu grob, um es genau an-
einander zu schieben. Gibt es da noch eine bessere Lö-
sung, das umzusetzen?

 

[netzgestaltung]

geht das in die richtige richtung?
https://jsfiddle.net/dcgepzmy/4/

Ergänzung (9. November 2020)

also % werte gehen bei top/bottom nicht - stattdessen wären vh geeignet oder eine andere methode finden (flex/grid)

ansonsten hat eine recherche noch das hier gebracht:
https://www.bypeople.com/puzzle-grid-gallery-css/

hier hab ich nochmal das HTML überarbeitet, damit sollte alles leichter gehen:
https://jsfiddle.net/dcgepzmy/40/