DHTML Lab - DHTML Diner - Element Page Coordinates, Part 1 | 2 | WebReference

DHTML Lab - DHTML Diner - Element Page Coordinates, Part 1 | 2


Determining Element Page Coordinates, Part 1
IE for Windows, NS6

Positioned Elements

Positioned elements, as we know, store their x-y coordinates in the

  • elementReference.left      (W3C standard. IE and NS6+)
  • elementReference.pixelLeft (non-standard. IE only)
  • elementReference.posLeft   (non-standard. IE only)
properties of their style object. These read/write properties, however, reflect the distance of the element from the containing element. A top-level positioned element is contained within the

element, synonymous with the window object for the purpose of determining position. The above properties will, therefore, give us the page position of the element if it is a top-level positioned element. If the positioned element is nested within another positioned element, the above properties return the position of the nested element within the parent element, not the page position.

All positioned elements define the beginning of a new coordinate system. The position properties of all contained elements reflect the distance of the elements from the top-left of the containing element.

Regular (Static) HTML Elements

All HTML elements, positioned or not, have two read-only properties that reflect position:

  • elementReference.offsetLeft
  • elementReference.offsetTop (both non-standard. IE and NS6+)

All HTML elements also have properties that store the types of parent elements that every element has:

  • elementReference.parentElement (non-standard. IE only)
  • elementReference.parentNode    (standard. IE5+ and NS6+)
  • elementReference.offsetParent  (non-standard. IE and NS6+)

An element is nested within its parentElement or parentNode.
An element is offset (positioned) within its offsetParent.

Consider this snippet of HTML:

<TABLE>
  <TR>
    <TD>
      <P>
        <B>
          <I ID="BoldItalicElement">I am bold-italic text</I>
        </B>
      </P>
    </TD>
  </TR>
</TABLE>

The BoldItalicElement element (<I>) is nested within the <B> element.
The BoldItalicElement element (<I>) is offset (positioned) within the <TD> element.

The parentElement of BoldItalicElement is the <B> element.
The parentNode of BoldItalicElement is the <B> element.
The offsetParent of BoldItalicElement is the <TD> element in IE.
The offsetParent of BoldItalicElement is the <BODY> element in NS6 non-standards mode.
The offsetParent of BoldItalicElement is the <HTML> element in NS6 standards mode.

As you can see, there are regular HTML elements that act like positioned elements in defining new coordinate systems.

In IE, TABLE and TD are two of these. The reason should be immediately apparent. Their content is offset within them, and is not part of the normal flow of the document. On the other hand, P, B, I, et al. do not affect positioning, just content display.

In NS6+, what is considered an offset parent depends on the browser version used. There are three different variations. These are discussed later.

The parentElement, the parentNode and the offsetParent may be the same element, depending on your page layout. The offsetParent property should be used, however, when determining position.

But, we are getting ahead of ourselves here.

Before we begin to discuss position deduction, we must view it in context. It would be highly beneficial to examine the different approaches to document hierarchy in detail first.

Produced by Peter Belesis and

All Rights Reserved. Legal Notices.
Created: May 18, 1998
Revised: August 26, 2002

URL: https://www.webreference.com/dhtml/diner/realpos1/2.html