CHAPTER 13. POSITIONING: RELATIVE AND ABSOLUTE 143
right: 5px;This will move the right edge of the element 5px to the left
compared to the right edge of the viewport. Negative numbers move it to
the right (off screen).
top: 5px;This will move the top edge of the element 5px lower compared
to the top edge of the viewport. Negative numbers move it up (off screen).
bottom: 5px;This will move the bottom edge of the element 5px higher
compared to the bottom edge of the viewport. Negative numbers move it
down (off screen).
If both top and bottom are specified, top takes precedence and bottom is
ignored.
13.4 Elements that Overlap / Underlap (z-index)
When elements overlap, the one with the higherz-indexcovers the one with
the lower z-index. Z comes from the z axis in three-dimensional geometry,
where the x axis is left-right, the y axis is up-down, and the z axis is closer
or farther away. The higher the z-index, the closer the element is to the
person viewing the webpage.
Example:.over { z-index: 1; }
Exam Question 263(p.351): What attribute specifies stacking order for
overlap?
Required Answer:z-index
Currently there are no three-dimensional special effects. With 3d-glasses
that might happen in the future. Right now, everything is flat with higher
z-indexes covering lower ones.
With hover and z-index adjustment, you could pull a card out of a deck of
playing cards, or show a picture out of a pile of pictures.
The default z-index is zero.
If two elements have the same z-index (maybe the default of zero), the one
that appears later in the HTML will go on top.