Element Properties: offsetParent

By: Dusty Arlia
Published on Saturday, August 24, 2013, 01:13 PM
Last Updated on Tuesday, July 14, 2015 at 12:19 AM
Total Updates: 3

The offsetParent property returns a reference object to the element which the offsetLeft and offsetTop properties are relative to. The offsetParent element is the closest containing element that is positioned (not inline). offsetTop and offsetLeft are relative to offsetParent's padding edge.

Here is offsetParent's basic syntax:

parent_object = element.offsetParent;

parent_object is an object reference to the element in which the current element is offset.

If offsetParent is null, the offsetLeft and offsetTop properties are document coordinates. Therefore, if you need to determine the position of an element using offsetLeft and offsetTop, use a loop like this:

//e equals the element

function get_element_position (e){
	var x = 0, y = 0;
	while (e != null) {
		x += e.offsetLeft;
		y += e.offsetTop;
		e = e.offsetParent;
	return {x:x, y:y}