420 Chapter 23 – Cascading Style SheetsPositioning with Style Sheets
Web Design in a Nutshell, eMatter EditionAbsolute positioningAbsolute positioning places the element in an arbitrary position, but technically, it
is still relative to the containing block of another element or to the document coor-
dinates (it will scroll when the document scrolls). Measurements in absolute
positioning are relative to the top-left corner of the document itself (or the
containing block of another element). Again, negative values can be specified.
When an element is positioned absolutely, the space it previously occupied is
closed up, as shown in Figure 23-5 and the following code. In its new position,
the element may overlap other elements on the page. An absolutely positioned
element has no margins—its outer edge stops at the border.<HEAD>
<STYLE TYPE="text/css">
<!--
EM { position: absolute; top: 20px; left: 12px; }
-->
</STYLE>
</HEAD><BODY>
<P>This line contains some <EM>emphasized</EM> text that will
be repositioned.</P>
<P>This is some more text that follows the line with emphasized
text.</P>
</BODY>
If its parent element is specified to have relative positioning (whether or not it is
actually moved), the absolutely positioned child element will be placed relative to
the position of the top-left corner of its parent. One possible application of this is
keeping notations nearby their source paragraphs.Static positioningStatic is the default value for the position property. Static elements can never serve
as a context for child element placement (as discussed in absolute positioning
above). Static elements cannot be positioned or repositioned.Z-Order
Z-order refers to the overlapping of elements that can occur when elements are
positioned outside of their normal flow. The CSS-P specification provides a special
property,z-index, for handling the placement of objects in 3-dimensional space.Figure 23-5: Word moved down and to the right with absolute positioning