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.
Subscribe
Javascript offsetTop and offsetLeft with position:relative and border
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.