HTML and CSS Reference
In-Depth Information
move objects to different sections of a page, move text and images, create animation, cre-
ate tooltips, scrolling text, and more. Normally when you place tags in an HTML docu-
ment, the flow is from top to bottom. Now, with style sheets, you can set the position of
an element, even layering one on top of the other (see Table 14.12).
A note about Netscape layers. Netscape 4 introduced layer (
<layer></layer>
) tags, a
prototype of CSS positioning, to control the position and visibility of elements on a page,
and then with Netscape 6 abandoned the whole thing. This topic does not address the
Netscape layer technology because it is really a thing of the past. However, the term
“layer” is still in use, and is used to refer to objects using the
id
attribute.
Table 14.12
Positioning Styles
Property
What It Specifies
bottom, right
The placement of the bottom, right edges of an element.
clip
A specified region of the element that will be seen.
display
Whether an element is displayed.
overflow
What to do if there is an overflow; that is, there isn't enough space for the
element.
position
How to position the element on the page.
top, left
The placement of the top, left edges of an element.
visibility
Whether an element can be seen.
width, height
The size in width and height of an element's content, not additional padding,
margins, borders, and so forth.
z-index
The third dimension in a stack of objects.
Absolute positioning places an element in a specific location on the page and can be
used to achieve full animation; for instance, moving an image across a page. It is used to
specify the absolute coordinates (
x,y
) of the element in terms of the browser window
itself. The
top
and
left
properties are used to determine the coordinates (see
Figure 14.23). If not specified, the browser will assume the top left corner of the browser
window, where
x
is 0 and
y
is 0. The top left corner of the window is position 0,0 and
the bottom right corner depends on the resolution of the screen. If the screen resolution
is set to 800 pixels in width and 600 pixels in height, the bottom right corner is posi-
tioned at coordinates 800, 600.
If an absolutely positioned element is nested within another absolutely positioned
element, it will be positioned relative to that element.
