Understanding HTML Lotech Solutions ( Jump to site home pagewww.lotechsolutions.com)

Understanding - DHTML positioning

Topic status automatically displays here - do not remove.

Add me to your favorites!Bookmark this topic  Print me!Print this topic

Positioning of HTML elements is determined by style rules applied to the element. Changing the values of the style using script or an event (like a mouse-click), changes the position or appearance of the HTML element. This dynamic changing is the "D" in DHTML.

The trick with DHTML positioning, is to create the styles which affect the appearance and position of the HTML element, then create the script which will alter the style. IE4 (and later) makes the Document Object Model (DOM) available to script, which means we can use script to read and write (where appropriate) every HTML element on the page. The script can control the page layout before, during and after the page is displayed in the browser window. This can provide some powerful display effects such as animation, popups, revealed and hidden sections, and the like.

Jump down to subjectStyles which position HTML elements
Jump down to subjectScripts which position HTML elements
Jump down to subjectEvents which position HTML elements

Back to Top

Styles which position HTML elements

When it comes to positioning HTML elements using style rules, the key player is the DHTML position property in association with the DHTML left, right, top, or bottom location properties.

Within an HTML style tag element, the position property syntax is:

{position : <sPosition>}

where <sPosition> is a string that specifies or receives one of the following values:

static The HTML element is positioned in the HTML page where it normally would be, as if no position property were applied. If no position value is declared, this is the default.
relative The HTML element is positioned according to the normal HTML flow, and then offset by the appropriate DHTML top, left, right, or bottom location properties.
absolute The HTML element is positioned absolutely to its parent positioned element—or to the body object if none of its parent elements are positioned—using its top and left properties.

So, 'static' displays the element where it normally exists in the HTML flow, 'relative' positions the element relatively to its otherwise normal HTML page position, and 'absolute' positions the element absolutely to the parent positioned element of the element.

The 'static' setting displays the element within the normal HTML flow of the page, whilst the 'relative' and 'absolute' settings display the element on a higher z-order plane than their respective parent positioning element, thus permitting the positioned element to overlap its parent and the other elements of the page which have a lower z-order.

HTML elements with the 'relative' position property style applied, maintain their original HTML place in the HTML flow, even though they may not be positioned there. That is, the original space remains (possibly unused) in the HTML flow as if the element was still there. However, HTML elements with the 'absolute' position property style applied, lose their place in the normal HTML flow of the page, and those elements immediately following (in the HTML flow) move up to occupy the original space of the positioned HTML element.

For the position property to have effect, it requires appropriate additional DHTML location properties (e.g. top and left) in the style to specify the relative location of the HTML element to its positioned parent element.

ToDo: Insert link to location property syntax and descriptions here.

Examples Examples

Tip Tips

To turn the visibility of an HTML element on and off as in the display of the previous examples, see Using FrontPage To Create Hidden Sections.

To control the position of an HTML element dynamically, you can use script to set the position and location properties, see Scripts which position HTML elements.

Back to Top

Scripts which position HTML elements

The absolute example above in Jump back to subjectStyles which position HTML elements contained movement buttons which directly altered the positioning element properties of a DIV. The scripts were written into the header of the page, and were called (enacted) by the onclick event of the buttons.

Back to Top

Events which position HTML elements

Replace this text with your sub paragraph text.

Back to Top

See Also

Jump to site home page Lotech Solutions' Tips, Tricks, and Procedures

Back to Top