How to maintain proportion on resize of a layout with absolute positioned elements
<p>I've been handed a bunch of pages to code up with weird irregular layouts. Below is an example of what I need to create.</p>

<p><a href="https://i.stack.imgur.com/3tYcr.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3tYcr.jpg" alt="enter image description here"></a></p>

<p>The key points about this are;</p>

<ul>
<li>The elements need to be positioned pixel perfect as per the mockups.   </li>
<li>Upon window resize, all elements and the positions need to size down/up 
proportionately.</li>
<li>The size of the container needs to resize proportionately also, because there will be more content under the layout.</li>
</ul>

<p>Considering each element needs to have specific positioning, it's obvious to use absolute positioning. I also note that because the layout needs to stay proportionate, positioning needs to be done in percentages.</p>

<p>For images I can set the widths to be a percentage and height auto. And elements can be positioned with a percentage along the x axis.</p>

<p>But the problem arises when I need to position from the top.</p>

<p>If I declare an element to be say 20% from the top, this positioning won't change proportionately when I resize the page. Also, the containing block will need to have a declared height.</p>

<p>The only way I can see this working is with some javaScript trickery.</p>

<p>But this seems fussy for a seemingly simple layout. And it's not advisable to rely on javaScript to maintain a layout.</p>

<p>There must be a better solution, I've seen irregular layouts like this often.</p>

<p>I've looked into Flexbox, but I can't think of how it can help me in this situation.</p>

<p>How would you tackle this layout?</p>