HTML and CSS Reference
EXAMPLE 14.24 ( CONTINUED )
This is a paragraph.
The style sheet starts here with the <style> tag.
A class called divStyle is defined.
This style will produce a blue box, 250 pixels wide and 150 pixels high. It will be
positioned at the top, left corner of the window (0,0) because the top and left
properties are undefined.
The div element will use the style defined by the divStyle class.
The paragraph element is embedded within the <div> tags. The div box is like a
mini window. It will placed at the top, left corner of the window, because its po-
sition has not been defined. See Figure 14.27.
Figure 14.27 The div block is absolutely positioned in the window.
Relative positioning places the element in a position relative to the element where it is
defined within the document. This type of positioning is used to control the way ele-
ments appear in relation to other elements in the document. In the following example
the .ParaStyle class is positioned relative to where it should be placed within its con-
tainer, a div block.