16.2.1 Positioning Elements with CSS
The CSS positionproperty specifies the type of positioning applied to an element. Here are the four possible values for this property:
This is the default value and specifies that the element is positioned according to the normal flow of document content (for most Western languages, this is left to right and top to bottom). Statically positioned elements cannot be positioned with top, left, and other properties. To use CSS positioning techniques with a document element, you must first set its position property to one of the other three values.
This value allows you to specify the position of an element relative to its containing element. Absolutely positioned elements are positioned independently of all other elements and are not part of the flow of statically positioned elements. An absolutely positioned element is positioned either relative to its nearest positioned ancestor or relative to the document itself.
This value allows you to specify an element’s position with respect to the browser window. Elements with fixed positioning are always visible and do not scroll with the rest of the document. Like absolutely positioned elements, fixed-position elements are independent of all others and are not part of the document flow. Fixed positioning is supported in most modern browsers but is not available in IE6.
relative When the position property is set to relative, an element is laid out according to the normal flow, and its position is then adjusted relative to its position in the normal flow. The space allocated for the element in the normal document flow remains allocated for it, and the elements on either side of it do not close up to fill in that space, nor are they “pushed away” from the new position of the element.
Once you have set the position property of an element to something other than static, you can specify the position of that element with some combination of the left, top, right, and bottom properties. The most common positioning technique uses the left and top properties to specify the distance from the left edge of the containing element (usually the document itself) to the left edge of the element and the distance from the top edge of the container to the top edge of the element. For example, to place an element 100 pixels from the left and 100 pixels from the top of the document, you can specify CSS styles in a style attribute as follows:
If an element uses absolute positioning, its top and left properties are interpreted relative to the closest ancestor element that has its position property set to something other than static. If an absolutely positioned element has no positioned ancestor, the top and left properties are measured in document coordinates—they are offsets from the top-left corner of the document. If you wish to absolutely position an element relative to a container that is part of the normal document flow, use position:rela tive for the container and specify a top and left position of 0px. This makes the container dynamically positioned but leaves it at its normal place in the document flow. Any absolutely positioned children are then positioned relative to the container position.
Although it is most common to specify the position of the upper-left corner of an element with left and top, you can also use right and bottom to specify the position of the bottom and right edges of an element relative to the bottom and right edges of the containing element. For example, to position an element so that its bottom-right corner is at the bottom-right of the document (assuming it is not nested within another dynamic element), use the following styles:
position: absolute; right: 0px; bottom: 0px;
To position an element so that its top edge is 10 pixels from the top of the window and its right edge is 10 pixels from the right of the window, and so that it does not scroll with the document, you might use these styles:
position: fixed; right: 10px; top: 10px;
In addition to the position of elements, CSS allows you to specify their size. This is most commonly done by providing values for the widthand heightstyle properties. For example, the following HTML creates an absolutely positioned element with no content. Its width, height, and background-color properties make it appear as a small blue square:
Another way to specify the width of an element is to specify a value for both the left and right properties. Similarly, you can specify the height of an element by specifying both top and bottom. If you specify a value for left, right, and width, however, the width property overrides the right property; if the height of an element is overconstrained, height takes priority over bottom.
Bear in mind that it is not necessary to specify the size of every dynamic element. Some elements, such as images, have an intrinsic size. Furthermore, for dynamic elements that contain text or other flowed content, it is often sufficient to specify the desired width of the element and allow the height to be determined automatically by the layout of the element’s content.
CSS requires position and dimension properties to be specified with a unit. In the examples above, the position and size properties were specified with the suffix “px,” which stands for pixels. You can also use inches (“in”), centimeters (“cm”), points (“pt”), and ems (“em”; a measure of the line height for the current font).
16.2 Important CSS Properties | 421
Instead of specifying absolute positions and sizes using the units shown above, CSS also allows you to specify the position and size of an element as a percentage of the size of the containing element. For example, the following HTML creates an empty element with a black border that is half as wide and half as high as the containing element (or the browser window) and centered within that element: