Location fundamentals

Location fundamentals

The portion of Windows Internet Explorer that displays the document is called the content area. Beginning in the upper-left corner with x and y coordinates set at 0, the content area has no inherent margin or padding. The HTML element is the first container in the document and is relative to the content area (generally, the browser window).

The distance between any element and its positioned parent element defines the element location. Internet Explorer exposes the element location when a document renders or when a change to the content forces a document to be redrawn. Understanding how elements are located within the document is crucial 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 generally indicates the layout of content from left to right, and from top to bottom. Inline and block elements that do not have absolute or fixed positioning flow in this manner by default, unless otherwise specified. Elements having absolute or fixed 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 appearing 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 alters the location of adjacent elements in the document flow.

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 inline element:

<!DOCTYPE HTML PUBLIC "-//W3C//Dtd HTML 4.0 Strict//EN">
function getLocation(){
   alert("Left: " + ospan.offsetLeft);
   ospan1.innerHTML="Changed content.";
   alert("Left: " + ospan.offsetLeft);
   ospan1.innerHTML="This is some dynamic content.";
<span id="ospan1">This is some dynamic content.</span>
<span style="background-color: #CFCFCF;" id="ospan">
This content won't change, but the location of this element will change.
<input type="button" value ="Locate Second Element" onclick="getLocation()">

Determining the distance between any nested element and its parent might require you to include the location of the parent. For example, the top and left locations of a TD element return the distance between the cell and the parent, which is the TABLE element. To determine the distance between a nested element and the BODY element, you must evaluate the document hierarchy and add the left location values of all the parent objects between the two elements.

Community Additions

© 2015 Microsoft