Getting exact coordinates/positions for overlays

Hi everyone, I am a beginner to programming and BPMN and am currently following the starter guide for making overlays https://github.com/bpmn-io/bpmn-js-examples/tree/master/overlays

However, I plan to assign each overlay to the relevant task and align them neatly. Hence may I kindly request for assistance on getting the exact coordinates of each task block? Or if there is a better way of getting the relevant bottom and right values for the position of each overlay that I want.

For example:

overlays.add(‘SCAN_OK’, ‘note’, {
position: {
bottom: -50,
right: 0
},
html: ‘

scan_qr_ yes_flow

});