Я использую getBoundingClientRect (), когда мне нужно, чтобы контент оставался без изменений, при размещении дополнительного контента рядом с ним.
var r=window.getSelection().getRangeAt(0).getBoundingClientRect();
var relative=document.body.parentNode.getBoundingClientRect();
ele.style.top =(r.bottom -relative.top)+'px';//this will place ele below the selection
ele.style.right=-(r.right-relative.right)+'px';//this will align the right edges together
это работает в Chrome, но IE любит давать странные вещи, так что вот кросс-браузерное решение: (Протестировано в Chrome и IE, возможно, работает в другом месте)