DHTML Lab - DHTML Diner - Element Page Coordinates, Part 1 | 7
Determining Element Page Coordinates, Part 1
| |||||||||||||||||||||||||||||||||||
 | The WebReference logo appears in the left column once again, only this time it is contained in a TABLE which in turn is in a positioned element. This element is nested in another positioned element. The HTML hierarchy for the positioned element is: <HTML>
<HEAD></HEAD>
<BODY>
...
<DIV STYLE="position:absolute;">
...
<SPAN STYLE="position:absolute;">
<TABLE>
<TR>
...
<TD>
<IMG ID="TheWRImage" SRC="wrlogo.gif">
</TD>
</TR>
</TABLE>
</SPAN>
</DIV>
...
</BODY>
</HTML>
|
The table below illustrates the document hierarchy of this page in relation to the WR logo image and with reference to the offsetParent property of positioned and static elements.
| Offset Parents - elementReference.offsetParent | |
| Your browser: | n/a |
 |
TheWRImage | TD | TR | TABLE | SPAN | DIV | BODY | null |
 |
TheWRImage | TD | TABLE | SPAN | DIV | BODY | null |
 |
TheWRImage | TD | TABLE | SPAN | DIV | HTML | null |
 |
TheWRImage | null |
 |
TheWRImage | SPAN | DIV | BODY | null |
 |
TheWRImage | TD | TABLE | SPAN | DIV | BODY | null |
Interesting results, you will agree.
In IE, moving up the element hierarchy, we first encounter the static elements that define coordinate systems, TD and TABLE. In IE4, we meet the TR as well, of course. When we reach the first positioned element, the SPAN, we break out of the static hierarchy and enter the hierarchy of positioned elements. The SPAN is offset within the DIV, another positioned element. Finally the DIV, top-most in the positioned element hierarchy, is offset within the page's root element: BODY (or HTML if the page forces IE6 into standards-compliant mode.)
NS6 regards only the document root element and positioned elements as elements that define new co-ordinate systems.
However, this NS6 behavior was introduced on July 10, 2001.
See our discussion elsewhere on DHTML Lab.
Gecko engine browsers released prior to this date regarded positioned elements as existing outside any hierarchy, even if they were nested within other positioned elements. Fair enough. On that mid-summer day in 2001 the behavior was changed to conform (more or less) to the IE behavior, to help developers avoid double-coding. But it seems that in the old Gecko browsers, static elements contained within positioned elements (like our logo IMG) were also regarded as belonging to unique hierarchies. This was poor behavior and thankfully was fixed when the behavior switch occurred.
But in NS7, as noted on the previous page, the behavior was again modified to completely conform to the IE standard.
Now, grab the positioned element above and drag it around the page. Grab and drag the logo. The values in the "Your browser:" element below will change to reflect the new position.
Note:
In many NS6 versions, if you drag the logo outside the DIV containing element, you may experience display refresh problems and see the logo in more than one position. Simply force a display refresh yourself (by minimizing and restoring the browser window, for example) to get a clean display. This is a NS6 bug but does not affect what we are trying to illustrate with our example.
| Element Page Position Calculated Using Positions of Offset Parents | |
| Your browser: | |
|
TheWRImage.offsetLeft = 0 TheWRImage.offsetTop = 0 TheWRImage.offsetParent = TD TheWRImage.offsetParent.offsetLeft = 0 TheWRImage.offsetParent.offsetTop = 0 TheWRImage.offsetParent.offsetParent = TR TheWRImage.offsetParent.offsetParent.offsetLeft = 0 TheWRImage.offsetParent.offsetParent.offsetTop = 0 TheWRImage.offsetParent.offsetParent.offsetParent = TABLE TheWRImage.offsetParent.offsetParent.offsetParent.offsetLeft = 0 TheWRImage.offsetParent.offsetParent.offsetParent.offsetTop = 0 TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent = SPAN TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetLeft = 30 TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetTop = 125 TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent = DIV TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetLeft = 151 TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetTop = 378 TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent = BODY TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetLeft = 0 TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetTop = 0 TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent = null Left (x) Page Position of TheWRImage = 181 (0 + 0 + 0 + 0 + 30 + 151 + 0) Top (y) Page Position of TheWRImage = 503 (0 + 0 + 0 + 0 + 125 + 378 + 0) |
|
TheWRImage.offsetLeft = 0 TheWRImage.offsetTop = 0 TheWRImage.offsetParent = TD TheWRImage.offsetParent.offsetLeft = 0 TheWRImage.offsetParent.offsetTop = 0 TheWRImage.offsetParent.offsetParent = TABLE TheWRImage.offsetParent.offsetParent.offsetLeft = 0 TheWRImage.offsetParent.offsetParent.offsetTop = 0 TheWRImage.offsetParent.offsetParent.offsetParent = SPAN TheWRImage.offsetParent.offsetParent.offsetParent.offsetLeft = 30 TheWRImage.offsetParent.offsetParent.offsetParent.offsetTop = 125 TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent = DIV TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetLeft = 180 TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetTop = 333 TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent = BODY TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetLeft = 0 TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetTop = 0 TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent = null Left (x) Page Position of TheWRImage = 210 (0 + 0 + 0 + 30 + 180 + 0) Top (y) Page Position of TheWRImage = 458 (0 + 0 + 0 + 125 + 333 + 0) |
|
TheWRImage.offsetLeft = 0 TheWRImage.offsetTop = 0 TheWRImage.offsetParent = TD TheWRImage.offsetParent.offsetLeft = 0 TheWRImage.offsetParent.offsetTop = 0 TheWRImage.offsetParent.offsetParent = TABLE TheWRImage.offsetParent.offsetParent.offsetLeft = 0 TheWRImage.offsetParent.offsetParent.offsetTop = 0 TheWRImage.offsetParent.offsetParent.offsetParent = SPAN TheWRImage.offsetParent.offsetParent.offsetParent.offsetLeft = 30 TheWRImage.offsetParent.offsetParent.offsetParent.offsetTop = 125 TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent = DIV TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetLeft = 188 TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetTop = 418 TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent = HTML TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetLeft = 0 TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetTop = 0 TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent = null Left (x) Page Position of TheWRImage = 218 (0 + 0 + 0 + 30 + 188 + 0) Top (y) Page Position of TheWRImage = 543 (0 + 0 + 0 + 125 + 418 + 0) |
|
TheWRImage.offsetLeft = 214 TheWRImage.offsetTop = 474 TheWRImage.offsetParent = null Left (x) Page Position of TheWRImage = 214 (214) Top (y) Page Position of TheWRImage = 474 (474) |
|
TheWRImage.offsetLeft = 0 TheWRImage.offsetTop = 0 TheWRImage.offsetParent = SPAN TheWRImage.offsetParent.offsetLeft = 30 TheWRImage.offsetParent.offsetTop = 125 TheWRImage.offsetParent.offsetParent = DIV TheWRImage.offsetParent.offsetParent.offsetLeft = 183 TheWRImage.offsetParent.offsetParent.offsetTop = 383 TheWRImage.offsetParent.offsetParent.offsetParent = BODY TheWRImage.offsetParent.offsetParent.offsetParent.offsetLeft = 0 TheWRImage.offsetParent.offsetParent.offsetParent.offsetTop = 0 TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent = null Left (x) Page Position of TheWRImage = 213 (0 + 30 + 183 + 0) Top (y) Page Position of TheWRImage = 508 (0 + 125 + 383 + 0) |
|
TheWRImage.offsetLeft = 0 TheWRImage.offsetTop = 0 TheWRImage.offsetParent = TD TheWRImage.offsetParent.offsetLeft = 0 TheWRImage.offsetParent.offsetTop = 0 TheWRImage.offsetParent.offsetParent = TABLE TheWRImage.offsetParent.offsetParent.offsetLeft = 0 TheWRImage.offsetParent.offsetParent.offsetTop = 0 TheWRImage.offsetParent.offsetParent.offsetParent = SPAN TheWRImage.offsetParent.offsetParent.offsetParent.offsetLeft = 30 TheWRImage.offsetParent.offsetParent.offsetParent.offsetTop = 125 TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent = DIV TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetLeft = 181 TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetTop = 343 TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent = BODY TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetLeft = 0 TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetTop = 0 TheWRImage.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent.offsetParent = null Left (x) Page Position of TheWRImage = 211 (0 + 0 + 0 + 30 + 181 + 0) Top (y) Page Position of TheWRImage = 468 (0 + 0 + 0 + 125 + 343 + 0) |
As mentioned, in IE4+ for Windows and NS6+, regardless of browser version, browser quirks, browser bugs and browser mode, adding up the offsetLeft and offsetTop values through an element offset hierarchy will always give you the true page position of the element.
Of course, we can create simple functions that will perform the calculations for us!
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/6.html
 | I'm draggable too! |
I am a position element. The WR logo is contained within a nested positioned element. Drag the contained element to a new position relative to me, or move both by dragging me.
Find a programming school near you