Understanding HTML | Lotech Solutions (
![]() |
Topic status automatically displays here - do not remove.
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.
Styles
which position HTML elements
Scripts
which position HTML elements
Events
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
To make an HTML element display in the HTML flow elsewhere on the page and relative to where it exists in the HTML, apply the position "relative" style to the element, and move it to a relative position by applying top and left values. For example:
Suppose we have 2 style rules for a paragraph 'P' tag:
- "example" — with no relative position setting; and
- "rel" — with a relative property setting, and some display formatting ...
<STYLE> P.example {color: blue;} P.rel { position: relative; background-color: aqua; border: 2px solid orange; color: maroon; left: 30px; top: -20px; width: 250px;} </STYLE>
Then suppose we take a series of HTML paragraphs, and apply the "example" class to them, and the "rel" class to just one in the middle ...
<P CLASS="example">This paragraph displays normally where it exists in the HTML.</P> <P CLASS="example">This paragraph displays normally where it exists in the HTML.</P> <P CLASS="rel">This paragraph displays relatively to where it exists in the HTML, and its original HTML place remains unfilled by the HTML flow.</P> <P CLASS="example">This paragraph displays normally where it exists in the HTML.</P> <P CLASS="example">This paragraph displays normally where it exists in the HTML.</P>
The result displays like this ...
This paragraph displays normally where it exists in the HTML.
This paragraph displays normally where it exists in the HTML.
This paragraph displays relatively to where it exists in the HTML, and its original HTML place remains unfilled by the HTML flow.
This paragraph displays normally where it exists in the HTML.
This paragraph displays normally where it exists in the HTML.
See that the 'relative' positioned paragraph is displayed over some of the other paragraphs. The relative element is now displayed 20 pixels above and to the right of the top left corner of the original HTML element position, which you should note has been left unused by the later HTML elements in the HTML flow.
The 'relative' position was determined by the 'top' and 'left' properties. The size was restricted by the 'width' property. The text color, background color, and border color is determined by their respective properties as declared in the style rules.
To make an HTML element display above the HTML flow elsewhere on the page and absolute to the parent positioned element of where it exists in the HTML, and have the HTML flow occupy the original HTML element position, apply the position "absolute" style to the element. For example:
Suppose we have 2 style rules for a paragraph 'P' tag:
- "example" — with no absolute position setting; and
- "abs" — with a absolute property setting, and some display formatting ...
<STYLE> P.example {color: blue;} P.abs { position: absolute; background-color: aqua; border: 2px solid orange; color: maroon; left: 330px; top: 415px; width: 250px;} </STYLE>
Then suppose we take a series of HTML paragraphs, and apply the "example" class to them, and the "abs" class to just one in the middle ...
<P CLASS="example">This paragraph displays normally where it exists in the HTML.</P> <P CLASS="example">This paragraph displays normally where it exists in the HTML.</P> <P CLASS="abs">This paragraph displays absolutely to a fixed position, irrelevant to where it exists in the HTML, and its original HTML place is filled by the HTML flow.</P> <P CLASS="example">This paragraph displays normally where it exists in the HTML.</P> <P CLASS="example">This paragraph displays normally where it exists in the HTML.</P>
The result displays like this ...
This paragraph displays normally where it exists in the HTML.
This paragraph displays normally where it exists in the HTML.
This paragraph displays absolutely to a fixed position, irrelevant to where it exists in the HTML, and its original HTML place is filled by the HTML flow.
This paragraph displays normally where it exists in the HTML.
This paragraph displays normally where it exists in the HTML.
Left
Top
The "absolute" positioned element has had it's original HTML place filled by the following HTML elements in the HTML flow. It displays at the position specified by its top and left properties from its applied style. These originate from the top left corner of its parent positioned HTML element.
In this case, the parent positioned element of the absolute style paragraph is the <DIV> tag used to contain this example, and as the top and left properties for the paragraph have been set to 415px and 330px respectively, the paragraph now displays at those co-ordinates as measured from the top left corner of this example section.
Click the "Show Dimensions" button to display the top and left dimensions. See that they are measured from the top left corner of this example section.
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.
The absolute example above in Styles
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.
Replace this text with your sub paragraph text.
Lotech Solutions' Tips, Tricks, and Procedures
Copyright Lotech Solutions. All rights reserved.