How to get carriage position in editable content div that contains br, img and #text?

Question

In my editable content div, the structure looks like

div
   <br>
   <img>
   Hello world
   <br>
   <br>
   <br>
   Hello again
   ...

I hope to get the current x, y coordinates of the carriage.

I tried to use

var currentSelection = window.getSelection();
var currentRange     = currentSelection.getRangeAt(0);
var insertContainer  = currentRange.startContainer;

and look

insertContainer.offsetTop

but it does not work for #text and br node, because insertContainer is only the parent div.

Can anyone help?