HTML and CSS Reference
In-Depth Information
EXPLANATION
1
The CSS style sheet creates classes that will be used to position the first three
div
elements.
2
These variables will be used by the functions in the JavaScript code.
3
After the document has been loaded, the window's
onload
event will be triggered
and the anonymous function called.
4
The
getElementById()
method returns references to three
div
block objects.
5
A function called
startPosition()
is defined. It will put the
div
elements back in
their original positions after they have been moved.
6
A function called
movePosition()
is defined. It is responsible for moving the text
to different positions on the screen.
7
The first block of text will be positioned at 50 pixels from the left side of the
screen and 150 pixels from the top.
8
The second block of text will be positioned at 100 pixels from the left side of the
screen and 100 pixels from the top.
9
The third block of text will be positioned 150 pixels from the left side of the screen
and 50 pixels from the top.
10
The
div
containers are given an
id
and a class that will assign absolute positions
on the page. Each
div
block will contain a string of text.
11
When the user clicks the button labeled “move text”, the
onClick
event will be
triggered, causing the text to be moved to a different location on the page. See
Figure 14.35.
Figure 14.35
After the user clicks the “move text” button, the
div
containers are moved.
Revisiting the
z-index
and Dynamic Positioning.
On page 583 of this chapter,
the
zIndex
property was described to create a three-dimensional effect with a stack of
<div>
containers. In Example 14.31 a JavaScript program manipulates the containers so
that they can be moved into different positions.
