Добавляем кнопкам атрибут, который будет указывать, на сколько какую координату надо изменить:
<button data-move="-10,0">left</button>
<button data-move="10,0">right</button>
<button data-move="0,-10">up</button>
<button data-move="0,10">down</button>
<button data-move="10,10">right down</button>
<button data-move="20,-5">fast right slow up</button>
Пишем обработчик клика, где считываем значение атрибута, вычисляем и назначаем новые значения координат:
$(document).on('click', '[data-move]', function() {
const [ dx, dy ] = this.dataset.move.split(',').map(Number);
$('#overlay')
.css('left', (i, val) => `${parseInt(val) + dx}px`)
.css('top', (i, val) => `${parseInt(val) + dy}px`);
});
// или, к чёрту jquery
document.addEventListener('click', e => {
const { move } = e.target.dataset;
if (move) {
const block = document.querySelector('#overlay');
const { left, top } = getComputedStyle(block);
const [ dx, dy ] = move.split(',').map(n => +n);
block.style.left = parseInt(left) + dx + 'px';
block.style.top = parseInt(top) + dy + 'px';
}
});
