Relative Positioning

The text at the end of this sentence is in superscript.

The text at the end of this sentence is in subscript.

The text at the end of this sentence is shifted left.

The text at the end of this sentence is shifted right

In the style sheet "relstyle.css", which this document is linked to, the position property is set to relative for every element and class. Relative positions always sets the position relative to the general default flow in a page. Note that some of the style properties give their values using the unit ex. This, similar to em is a unit of measure derived from old typographers. 1ex is the default height of the letter lower case "x" is the given font. Note that each class has its own relative position.

If the value of top is negative, the element is moved up.
If the value of bottom is negative, the element is moved down.

The span element needs some explanation. The span element is called a grouping element, viz it applies style properites to a section of text, but does not do any formatting itself. Grouping elements may be either block-level or inline-level.

block-level grouping elements

• Headings: h1,...h6
• paragraphs: p
• divisions: div

inline-level grouping elements

• Sections of text: span
• images: img
• anchors: a
• bold: strong
• italics: em

span applies style properties without changing the flow of the document. In this page, the span is used to apply several different class properties to sections of paragraphs.
Please note that the text in the 4th line, which was shifted right, has overwritten the period in that line. This occured because the span ended before the "." and the positioning is relative, so the period remains where it was. As an experiment, try moving the </span> after the period.

Please go to Part 8 to continue with CSS