Flexible layout Options

[Tachu]

Hello,
I'd like to position the shapes in the attached sample with percentages of the height and width of the visible browser Window the page is displayed in (viewport).

In various attempts to implement the attached layout I have tried the style position, but I think that style only allows pixel positions. And the CSS grid seems to be too rigid to implement these more free positions. And flexbox seems to only allow top, center and bottom or left, center and right. Or perhaps I have overlooked something?

I'd be grateful for any suggestions, hints or URLs on what approaches are possible here.

Thank you Tachu