HTML and CSS Reference
In-Depth Information
z-index
This property defines a layering or stacking context for positioned elements.
Syntax
z-index:
integer
| auto | inherit
By default, overlapping positioned elements stack in the order in which they are defined in
a markup document. This property can override default layering by assigning numeric
layering values to an element, with higher numbers layering above lower numbers. Negative
numbers are allowed. The
auto
value tries to determine the z-placement of an element
automatically by its markup position in the document.
Examples
#div1 {position: absolute; top: 20px; left: 20px; height: 50px; width: 50px;
background-color: blue; z-index: 2;}
#stayDown {z-index: -10;}
Compatibility
CSS 2, 3
IE 4+
Netscape 4+, Firefox 1+
Opera 4+, Safari 1+
Notes
• When nesting objects are nested position-wise, note that each individual positioned
box maintains its own stacking context, with
0
being the default
z-index
level.
• It is a wise idea not to use contiguous
z-index
values, so that it is easy to insert
between objects.
CSS2 and CSS 2.1 Aural Style Properties
CSS2 specified a number of properties for use with speech-based browsers. CSS 2.1
retained these but, so far, no major browsers currently support these properties natively.
Furthermore, the specification actually indicates that user agents “...are not required to
implement the properties of this chapter in order to conform to CSS 2.1.” Because of
this and the lack of the support, this section provides only basic information on these
properties, but note that in the case of speech-enabled browsers, the properties provide
improvements to specify the rate of speech, time to pause before and after words, how
background sounds should be controlled, and much more. Table 5-10 lists the CSS2 aural
style properties and provides the most basic details.
