Is there any reason you'd want to use `translate()` instead of `absolute` positioning, or vice-versa? And why?

translate() is a possible value of the CSS transform property. When using translate(), the element still occupies its original space (sort of like position: relative). But when changing the absolute positioning of an element, the element is removed from the flow of the page and the positioning of surrounding elements will be affected. Hence, the page layout will have to be recalculated.

Changing transform or opacity does not trigger browser reflows or repaints — only compositing. On the other hand, changing absolute positioning triggers a reflow. transform causes the browser to create a GPU layer for the element, but changing absolute positioning properties uses the CPU. Hence, translate() is more efficient and will result in shorter paint times for smoother animations.