HTML and CSS Reference
In-Depth Information
EXPLANATION
3
If the
zIndex
of the object evaluates to 100, it must be at the top of the stack, be-
cause that is as high as the stack gets.
4
This sets the stack level of the
zIndex
to 2, causing it to move toward the bottom of the
stack.
5
If the
zIndex
for the object is not 3, it is not at the top. Its
zIndex
will be set to 100,
moving it to the top of the stack.
6
The object is moved to the bottom of the stack with a
zIndex
of 0.
7
The
<span>
tag is used to create a rectangular red box on the screen. With a
zIndex
of 0, it will be positioned at the bottom of the stack.
8
When the user clicks the button, the
onClick
event is triggered, and the handler
function,
moveUp(id)
, is called.
9
A yellow rectangular box is created with the
<span>
tag. With a
zIndex
of 1, it will
be positioned above the last block in the stack.
10
A blue square box is created with the
<span>
tag. With a
zIndex
of 2, it will be po-
sitioned above the last block in the stack.
11
A small white rectangular box is created with the
<span>
tag. With a
zIndex
of 3,
it will be positioned at the top of the stack. See Figure 14.36.
Figure 14.36
The original configuration of the four rectangles (left); after manipulating the
rectangles by reassigning the
z-index
(right).
The
className
property is used to reference a CSS class. The
className
property is
defined for all HTML elements. With the
className
property, you can change an element
dynamically by assigning it the name of a class defined in a CSS. Example 14.32 contains
a CSS with three classes.
