Absolute Positioning Responsiveness

Hello guys!

I would like to put circles as decorative elements but I am not sure what would be the best option as I would also like to animate them (when mouse over). What I did is to move them around as divblocks with absolute positioning but then it messes up when changing breakpoints.


  1. Is there a way to move a divblock with absolute positioning responsively? So when the page gets smaller, it gets smaller/moves as well?
  2. In general, how would one position elements in a non-standard layout? Just as a background picture? Grid?

Any help would be appreciated

Assuming the circles are absolutely positioned within a positioned container, that container provides the context for the positioning. You can size and position them accordingly by using % units, e.g. blue circle width is 10%, and it’s 2% from the right and 20% from the top.