If anyone could find useful of this , I am sharing the following code snippet based on tweakpane.js as interactive positioning code snippet . It's very easy to use : select position from the list at very top on right hand side (at position_handler) & click on the square you want to target the CSS position rule to ; in case for squares overlapping you can also target the rule to one of the squares presented in the short list (Choose from:) that ordered ascendingly as if from left to right (0, 1, 2, ...) in the DOM. It's not perfect , but decent way to play around as the supplement to all what is provided in this article by author "Yuri" . p.s. Well done to the Author, Cheers !

Very clear and helpful! Thank you!

Nice visuals! It really helps out the conceptually challenged folks like myself. 😜

Simple and detailed explanation! Very nice write-up! 😊