Setting an Element's Position In addition to the margins, which can be specified as part of the box properties (see "Setting an Element's Margins" in Chapter 6), a positioned element can have a top value, a left value, a bottom value, and a right value used to position the element from those four sides (Table 7.2). Table 7.2. Top and Left ValuesVALUE | COMPATIBILITY |
|---|
<length> | IE4, FF1, S1, O4, CSS2 | <percentage> | IE4, FF1, S1, O5, CSS2 | auto | IE4, FF1, S1, O5, CSS2 |
Setting the Position From the Top and Left The top and left values are used to set the element's position from the top and left edges of its parent element for absolute and fixed positions or relative to its natural flow position for relative positioning (Figures 7.4 and 7.5). Figure 7.4. The example without positioning. 
Figure 7.5. The object has been absolutely positioned from the top-left corner of the window and the words "clean cup" have been offset from the top and left of their normal position. 
To define the left and top positions: | | 1. | position: absolute;
To position an element using the left and top properties, you have to include the position property in the same rule or style attribute (Code 7.2).
Code 7.2. After you set the position type (relative, absolute, or fixed), you can set the element's top and left distance from its origin (top/left corner).| [View full width] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/  xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML & Ajax | Setting the Left and Top Position of an Element</title> <style type="text/css" media="screen"> body { font-size: 1em; font-family: Georgia, "Times New Roman", times, serif; color: #000000; background-color: #999; margin: 8px; } img { margin-bottom: 4px; display: block; } #object1 { position: absolute; top: 50px; left: 6em; } .dropBox { padding: 4px; background-color: #fff; border: 2px solid #f00; width: 258px; font: large Arial, Helvetica, sans-serif; } .changeplace { position: relative; top: .81cm; left: 1cm; background-color: #ffcccc; } </style> </head> <body> <div > <img src="/books/3/292/1/html/2/alice27.gif" height="225" width="250" alt="Alice in Wonderland" /> 'I want a<span > clean cup</span>,' interrupted the Hatter: 'let's all move one place on.' </div> </body></html>
|
| 2. | left:
Type the left property name, followed by a colon (:), in the CSS declaration block or in the style attribute of an HTML tag.
| | | 3. | 12em;
Now type a value for how far from the left the element should appear. You can enter any of the following:
A length value to define the distance of the element's left edge from the left edge of its parent or the window A percentage value, such as 55%, to set the left displacement relative to the parent element's width auto, which allows the browser to calculate the value if the position is set to absolute; otherwise, left will be 0
| 4. | top:
Type the top property name, followed by a colon (:), in the CSS declaration block or in the style attribute of a tag.
| | | 5. | 125px;
Type a value for how far from the top the element should appear. You can enter any of the following:
A length value to define the distance of the element's top edge from the top edge of its parent or the window A percentage value, such as 55%, to set the top displacement relative to the window or parent element's height auto, which allows the browser to calculate the value if the position is set to absolute; otherwise, top will be 0
|
 Tips
You don't have to include both the top and left declarations, but if not included, they are treated as auto. You can use negative values to move the content up and to the left instead of down and to the right. Margins applied to a relatively positioned element are rendered in the natural flow of the document (i.e., they don't move with the positioned element). This means that setting the top and left margins may cause the positioned content to move outside its naturally defined box and overlap other content. Child elements that are not absolutely positioned always move with their parent element.
Setting the Position From the Bottom and Right Although you can accomplish a lot by adjusting position from an element's top and left sides, it can be useful to position from the bottom and right sides as well (Table 7.3). Table 7.3. Bottom and Right ValuesVALUE | COMPATIBILITY |
|---|
<length> | IE5, FF1, S1, O4, CSS2 | <percentage> | IE5, FF1, S1, O4, CSS2 | auto | IE5, FF1, S1.3, O4, CSS2 |
CSS Level 2 introduced the ability to set an element's position relative to the right and bottom edges of an element's parent (Figure 7.6). Figure 7.6. The element has been absolutely positioned from the bottom-right corner of the window, and the words "clean cup" have been offset from the bottom and right of their normal position. 
To define the right and bottom positions: 1. | position: absolute;
To position an element by using the right and bottom properties, you have to include the position property in the same rule (Code 7.3).
Code 7.3. After you set the position type, you can set the element's right and bottom. The positions shift to the right and bottom edges of the element, however, so instead of the top-left corner, the origin will be the bottom-right corner of the window, the parent, or the element itself.| [View full width] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/ xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS, DHTML & Ajax | Setting the Right and Bottom Position of an Element</title> <style type="text/css" media="screen"> body { font-size: 1em; font-family: Georgia, "Times New Roman", times, serif; color: #000000; background-color: #999; margin: 8px; } img { margin-bottom: 4px; display: block; } .dropBox { padding: 4px; background-color: #fff; border: 2px solid #f00; width: 258px; font: large Arial, Helvetica, sans-serif; } #object1 { position: absolute; bottom: 50px; right: 6em; } .changeplace { position: relative; bottom: .81cm; right: 1cm; background-color: #ffcccc; } </style> </head> <body> <div > <img src="/books/3/292/1/html/2/alice27.gif" height="225" width="250" alt="Alice in Wonderland" /> 'I want a<span > clean cup</span>,' interrupted the Hatter: 'let's all move one place on.' </div> </body></html>
|
| 2. | right:
Type the right property name, followed by a colon (:).
| 3. | 12em;
Type a value to indicate how far from the right edge of the document the right edge of the element should appear. You can enter any of the following:
A length value to define the distance of the element's right edge from the right edge of its parent or the window A percentage value, such as 55%, to set the right displacement relative to the parent element's width auto, which allows the browser to calculate the value if the position is set to absolute; otherwise, right will be 0
| 4. | bottom:
Type the bottom property name, followed by a colon (:).
| | | 5. | 125px;
Type in a value to specify how far from the bottom the bottom edge of the element should appear. You can enter any of the following (Table 7.3):
A length value to define the distance of the element's bottom edge from the bottom edge of its parent or the window A percentage value, such as 55%, to set the bottom displacement relative to the window or parent element's height auto, which allows the browser to calculate the value if the position is set to absolute; otherwise, bottom will be 0
|
Tips You do not have to use both left and right positioning with the same element. What happens if you set the top/left and bottom/right positions for the same element? The answer depends on the browser. Internet Explorer always defaults to the top and left positions. But most others will stretch elements that do not have a definitive width or height to accommodate the values that have been set. What happens if the bottom position has been set, and the element is longer than the height of the page? Normally, the element would go off the bottom of the window, and you could access the rest of the content by using the scroll bar. If the bottom position of the element has been set, however, the element will be pushed up off the top of the window, and you cannot use the scroll bars to access it. So be careful when setting a bottom position for an element.
|
