Location fundamentals in quirks mode
The portion of Windows Internet Explorer that displays the document is referred to as the client area. Beginning in the upper-left corner with x and y coordinates set at 0, the client area has no inherent margin or padding. The BODY element is the first container in the document and is the top-most parent. Like the client area, the BODY element has no default margin or padding, and also begins at x and y coordinates of 0.
The distance between an element and its positioned parent element defines the element location. Internet Explorer exposes the element location when the document renders or when a change to the content forces the browser to redraw the document. Understanding how elements are located within the document is critical to determining and changing the location of an element.
The general layout of elements is primarily based on document flow. In left-to-right languages, flow indicates the layout of content from left to right, top to bottom. Inline and block elements that do not have absolute positioning flow in this manner unless otherwise specified. Elements that have absolute positioning render outside the document flow. The document flow is the order of the elements after their measurements are calculated. Changing the measurements or the location of positioned elements does not affect adjacent elements in the document flow, but it might affect child elements.
Non-positioned inline and block elements render together and are part of the document flow. The location of an element can change when the measurement of another element appears earlier in the document flow changes. The measurement of an element changes when the content, layout, or font style of another element is updated after the document renders. Changing the measurements of a non-positioned element changes the location of adjacent elements in the document flow.
Top and left locations
The following example shows how to retrieve the location of an inline element and how the measurement of another element affects the location of that element:
<script>
function getLocation(){
alert("Left: " + ospan.offsetLeft);
ospan1.innerHTML="Changed content.";
alert("Left: " + ospan.offsetLeft);
ospan1.innerHTML="This is some dynamic content.";
}
</script>
</body>
<span id="ospan1">This is some dynamic content.</span>
<span style="background-color: #CFCFCF;" id="ospan">
This content won't change, but this element's location will change.
</span>
<input type="button" value="Locate Second Element" onclick="getLocation()">
</body>
Offset parents
Although you can retrieve the top or left location of any element that renders, the values of these locations are relative to the positioned parent element. You can't always rely on a single value when determining the distance between two elements.
Nested elements
Determining the distance between any nested element and its parent element, such as the BODY element, might require you to include the location of the parent element. For example, the top and left locations of a TD element return the distance between the cell and the parent element, which is the TABLE element. To determine the distance between a nested element and the BODY element, you must walk up the document hierarchy and add the left location values of all the parent elements between the two elements.
Location example
The following example shows how to programmatically retrieve the absolute distance between a TD element and the BODY element:
<script>
function getAbsoluteLeft(oNode){
var oCurrentNode=oNode;
var iLeft=0;
while(oCurrentNode.tagName!="body"){
iLeft+=oCurrentNode.offsetLeft;
oCurrentNode=oCurrentNode.offsetParent;
}
alert("Left: " + oNode.offsetLeft + "\nAbsolute Left: " + iLeft);
}
</script>
<body>
<input
type="button"
value ="Get Absolute Left"
onclick="getAbsoluteLeft(oCell)"/>
<table cellspacing="2">
<tr><td id="oCell">Cell 1</td></tr>
</table>
</body>
See also
Concepts
Cascading style sheet reference
Properties by name
Measurement and location properties in strict mode
Send feedback about this topic to Microsoft. © 2011 Microsoft Corporation. All rights reserved.