| home / authoring / style / sheets / beginners / chap11 / 2 |    [previous] [next] |
|
|
|
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 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
| home / authoring / style / sheets / beginners / chap11 / 2 | [previous] [next] |
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
Created: July 22, 2002
Revised: July 22, 2002
URL: http://webreference.com/authoring/style/sheets/beginners/chap11/2/3.html
