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.
Nice!
Love the idea and demo. I actually forked it to add offset using the left & top properties: http://codepen.io/RonnyO/pen/bGwEg
Pingback: CSS Masters Israel | קונספט מעניין ל position:pointer