The CSS position property has some very useful value options. I found it very interesting that although very easy to implement, the position property doesn’t support dynamically moving an element according to pointer movements on the page. In many occasions, especially in the web applications era, it would be useful to have an element follow the cursor where ever it goes, or alternatively, follow it only on one axis: horizontal or vertical. On touch devices, the element would respectively follow the touch positions.

Check out this Pen!

According to this concept, by setting an element’s position like so: position: pointer;, the element will be positioned like an absolutely positioned element, though its top and left values will dynamically change according to the pointer position. Similarly, setting an element’s position to position: pointer-x; will make the element follow pointer movements like the position: pointer; setting, though it would only follow horizontaly. To complete, using position: pointer-y;, the element will follow the pointer vertical movements.