Here's a step in the (hopefully) right direction.
Some very important things to keep in mind here:
Positioning Basics
setting the element's position to absolute will allow you to freely place it based on the coordinates of the pixels, but it is usually recommended to place it in a container to limit it. You create a container for absolutely positioned elements, creating a parent with a relative position (or nothing but standard, static).
use variable values (in percent)
In addition, you want to place elements with percentages so that they can be changed and centered. You can assign an element the width or height%, and this will be% of the width or something else from its first non-static parent.
element positioning
Then you can position the elements based on percentage values using the left and top properties. Left for position: absolute elements indicate "some value from the left edge of the first non-static parent". Similarly for the top, bottom and right.
element centering
to position an element with absolute positioning in the middle of its first non-static parent, you give it a left value of 50% and an upper value of 50%. (50% of the width of the parents from the left edge of this parent and 50% of its height from above). This will position the upper left corner of the element in the middle for the parent. in order to fully center the element, you need to compensate for it by half its width and height. For this you can use margin-left and margin-right with negative values.
From there, you can simply adjust as needed, as I did in the provided demo. Examine the code (also pasted below for future reference) and see how the elements are located and what properties are used.
HTML
<div class="container"> <div class="block tl"></div> <div class="block t"></div> <div class="block tr"></div> <div class="block l"></div> <div class="center"></div> <div class="block r"></div> <div class="block bl"></div> <div class="block b"></div> <div class="block br"></div> </div>
CSS
.container { width: 300px; height: 300px; position:relative; margin:100px; } .block, .center { width:25%; height:25%; background:#5aa; border-radius:10px; position:absolute; left:50%; top:50%; margin-left:-12%; margin-top:-12%; } .center { width:30%; height:30%; margin-left:-15%; margin-top:-15%; } .center { border-radius:100%; } .tl { left:20%; top:20%; } .tr { left:80%; top:20%; } .br { left:80%; top:80%; } .bl { left:20%; top:80%; } .t { top:10%; } .r { left:90%; } .b { top:90%; } .l { left:10%; }