Javascript offsetTop and offsetLeft with position:relative and border

December 31, 2009     

Ran into a bit of a nasty CSS / Javascript interaction. The issue is that the javascript offsetTop and offsetLeft methods measure from background area of the box (that is, content area plus padding), however absolute position offsets are determined from the full box size including the border.

The result is that when you want to dynamically position an element (such as an autocomplete div under a text field), if the offsetParent (ie. parent with explicit position:relative) has a border, then you are going to be off by that much.