How to get the position of caret in a content editable div which contains br, img, and #text?

In my content-editable div, the structure is like

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

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

I tried to use

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

and look at

insertContainer.offsetTop

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

Could anyone help?