Image div overlay and preserving position during resize

I am placing a div on top of an responsive image, like this:

When I resize, I lose the position of the div tag, like this:

How can I resize this overlay div so that its size is proportionally resized and its position is maintained, when the screen size changes?