Versions of CSS CSS Example

Table 18-2. CSS positioning and visibility attributes Attributes
Description
right width
,
height
Specifies the size of an element
z-index
Specifies the stacking order of an element relative to any overlapping elements; defines a third dimension of element positioning
display
Specifies how and whether an element is displayed
visibility
Specifies whether an element is visible
clip
Defines a clipping region for an element; only portions of the element within this region are displayed
overflow
Specifies what to do if an element is bigger than the space allotted for it

18.2.1 The Key to DHTML: The position Attribute

The CSS
position
attribute specifies the type of positioning applied to an element. The four possible values for this attribute are:
static This is the default value and specifies that the element is positioned according to
right and top to bottom. Statically positioned elements are not DHTML elements and cannot be positioned with the
top
,
left
, and other attributes. To use DHTML positioning techniques with a document element, you must first set its
position
containing element. Absolutely positioned elements are positioned independently ll other elements and are not part of the flow of statically positioned elements.
absolutely positioned element is positioned either relative to the
body
of the document or, if it is nested within another absolutely positioned element, relative
to that element. This is the most commonly used positioning type for DHTML.
fixed the normal flow of document content for most Western languages, this is left to
attribute to one of the other three values.
absolute This value allows you to specify the position of an element relative to its
of a An
This value allows you to specify an elements position with respect to the browser window. Elements with
fixed
positioning do not scroll with the rest of the ll others and are
not part of the document flow. Fixed positioning is a CSS2 feature and is not supported by fourth-generation browsers. It is supported in Netscape 6 and IE 5
the Macintosh, but it is not supported by IE 5 or IE 6 for Windows.
relat
tion 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.
Relative positioning can be useful for some static graphic design purposes, but it is not commonly used for DHTML effects.

18.2.2 Specifying the Position and Size of Elements

Once you have set the
position
attribute 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
attributes. The most common positioning technique is to specify the
left
and
top
attributes, which 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:
div style=position: absolute; left: 100px; top: 100px;
The containing element relative to which a dynamic element is positioned is not necessarily the same as the containing element within which the element is defined in the
document source. Since dynamic elements are not part of normal element flow, their positions are not specified relative to the static container element within which they are
defined. Most dynamic elements are positioned relative to the document the
body
tag itself. The exception is dynamic elements that are defined within other dynamic elements.
ent
om
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 document and thus can be used to achieve frame-like effects. Like absolutely
positioned elements, fixed-position elements are independent of a
for
ive When the
position
attribute is set to
relative
, an element is laid out according to the normal flow, and its posi
In this case, the nested dynamic element is positioned relative to its nearest dynamic ancestor.
Although it is most common to specify the position of the upper-left corner of an elem with
left
and
top
, you can also use
right
and
bott