WebReference.com - Part 2 from Chapter 11 of Cascading Style Sheets A Beginner's Guide, from Osborne/McGraw-Hill (3/5) | WebReference

WebReference.com - Part 2 from Chapter 11 of Cascading Style Sheets A Beginner's Guide, from Osborne/McGraw-Hill (3/5)

To page 1To page 2current pageTo page 4To page 5
[previous] [next]

CSS: A Beginner's Guide

The Position Property

Once you have a handle on the different approaches to positioning boxes on a page, your next step is to learn the properties that control positioning. To control a box's position on a page, you need two different types of properties. First, you need to use the "position" property to specify which positioning scheme should be applied to the box. Next you need to specify the "coordinates" you want applied to the box by means of the top, bottom, left, and right properties.

As you might expect, the position property accepts keyword values of "static," "absolute," "relative," and "fixed." The default value is "static," and the syntax is straightforward. You can apply the position property to any element by merely adding the declaration, "position: value." Table 11-6 supplies some other key characteristics of the position property.

Does it inherit?

Default value

Browser support

Works with

No

Static

Inconsistent

Cross-browser support is strongest for the <div> and <span> elements.

All elements

Table 11-6 Characteristics of the position Property

The Top, Right, Bottom, and Left Properties

The position property in and of itself is not sufficient to position an element, because it has no means for specifying a location. For that, you need to use the top, right, bottom, and left properties. These properties may be used to specify a location based on the particular frame of reference that the position property has identified. Top, right, bottom, and left all accept either length (in, cm, mm, px, pt, pc) measurements or percentage measurements.

The syntax for these properties is simple, as long as you keep your positioning scheme and reference points in mind. For example, if you are working with absolute positioning and want to move an "h1" heading's box down 10 pixels from the top and 30% from the left side of the screen (assuming that the <body> element is the "parent" element), then you would write the style rule this way:

h1  {position: absolute;
     top: 10px;
     left: 30%;}

Table 11-7 lists other important characteristics of the top, right, bottom, and left properties.

Do they inherit?

Default value

Browser support

Work with

No

Zero

Inconsistent

Cross-browser support is strongest for the <div> and <span> elements.

All elements

Table 11-7 Characteristics of the top, right, bottom, and left properties


To page 1To page 2current pageTo page 4To page 5
[previous] [next]

Created: July 22, 2002
Revised: July 22, 2002

URL: https://webreference.com/authoring/style/sheets/beginners/chap11/2/3.html