| When you set the style attributes of an HTML tag through CSS, you effectively single out any content within that tag's container as being a unique element in the window (see "Understanding an Element's Box" in Chapter 6). You can then manipulate this unique element through CSS positioning. An element can have one of four position valuesstatic, relative, absolute, or fixed (Table 7.1). The position type tells the browser how to treat the element when placing it in the document (Figures 7.2 and 7.3 and Code 7.1). Table 7.1. Position ValuesVALUE | COMPATIBILITY |
|---|
static | IE4, FF1, S1, O4, CSS2 | relative | IE4, FF1, S1, O4, CSS2 | absolute | IE4, FF1, S1, O4, CSS2 | fixed | IE5[*], FF1, S1, O4, CSS2 | inherit | IE5[*], FF1, S1, O5, CSS2 |
[*] IE7 for Windows. Extremely buggy on the Mac.
Figure 7.2. Elements being positioned in the window. Notice that both the absolute-positioned (Object 3) and fixed-positioned (Object 4) objects have the same top-left corner because they both have the same top and left values set. 
Figure 7.3. When the document is scrolled, all of the elements scroll with it, except for Object 4, which has a fixed position. 
Code 7.1. The default position is static, but using relative, absolute or fixed, you can control the position of elements in the window.| [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 Position Type</title> <style type="text/css" media="screen"> body { font-size: 1.2em; font-family: Georgia, "Times New Roman", times, serif; color: #000000; background-color: #fff; margin: 8px; } img { margin-bottom: 4px; display: block; } .dropBox { padding: 4px; background-color: #FFFFFF; border: 2px solid #f00; } #object1 { position: static; width: 158px; } #object2 { position: relative; top: -25px; left: 85px; width: 208px; z-index: 3; } #object3 { position: absolute; top: 25px; left: 350px; width: 258px; z-index: 2; } #object4 { position: fixed; top: 25px; left: 350px; width: 308px; z-index: 1; } </style> </head> <body> <div > <img src="/books/3/292/1/html/2/alice22a.gif" height="220" width="150" alt="Alice in Wonderland" /> Object 1</div> <div > <img src="/books/3/292/1/html/2/alice15a.gif" height="264" width="200" alt="Alice in Wonderland" /> Object 2</div> <div > <img src="/books/3/292/1/html/2/alice28a.gif" height="336" width="250" alt="Alice in Wonderland" /> Object 3</div> <div > <img src="/books/3/292/1/html/2/alice30a.gif" height="408" width="300" alt="Alice in Wonderland" /> Object 4</div> </body> </html>
|
Using Static Positioning By default, elements are positioned as static in the document, unless you define them as being positioned absolutely, relatively, or fixed. Static elements, like the relatively positioned elements explained in the following section, flow into a document one after the next. Static positioning differs, however, in that a static element cannot be explicitly positioned or repositioned. In the example shown in Figures 7.2 and 7.3, Object 1 is not positioned, so it simply appears in the top-left corner of the document since it is the first element in the normal flow of the HTML code. Notice that the static element is not at the very top-left corner of the document: It's offset by about 5 pixels top and left. This is because most browsers will add a margin to the body automatically. Using Relative Positioning An element that is defined as being relatively positioned will be offset based on its position in the normal flow of the document. This technique is useful for controlling the way elements appear in relation to other elements in the window. In the example shown in Figures 7.2 and 7.3, Object 2 would have appeared directly beneath Object 1 in the normal flow. However, Object 2 has been positioned relative to its position in the normal flow: It has been moved 85 pixels to the right and 25 pixels up, so that it overlaps Object 1. Using Absolute Positioning Absolute positioning takes an element out of the normal flowseparating it from the rest of the document. Elements that are defined in this way are placed at an exact point in the window by means of x and y coordinates. The top-left corner of the document or the element's parent is the origin (that is, coordinates 0,0). Moving an element to a position farther to the right uses a positive x value; moving it farther down uses a positive y value. Absolutely positioned elements take up no space within the parent element. So if you have an element like an image that is being absolutely positioned, it's width and height are not included as part of the width and height of the parent. Only static and relatively positioned content are included. In the example shown in Figures 7.2 and 7.3, Object 3 is positioned 350 pixels from the left edge of the document (ignoring the document margin) and moved 258 pixels up and out of the document window. Using Fixed Positioning Fixing an element's position in the window works almost exactly like absolute positioning: The element's position is set to a specific point in the viewport, independent of all other content on the page. The big difference is that when the document scrolls in the viewport, fixed elements stay in their initial positions and do not scroll. However, fixed positioning has not been widely used (or at least relied upon) because it is not implemented in Microsoft Internet Explorer 6 and earlier. The good news is that Internet Explorer 7 supports fixed positioning, which will be a boon for user interface design, allowing important elements such as navigation to stay in the same location on the screen without resorting to frames. In the example shown in Figures 7.2 and 7.3, you cannot see all of Object 4 in the first figure because it occupies the exact same position as Object 3. However, as soon as the page is scrolled, the fixed element can be seen as the absolute element moves up and out of the viewport. To set an element's position type: 1. | position:
Type the position property in a rule's declaration block or in the style attribute of an HTML tag, followed by a colon (Code 7.1).
| | | 2. | relative;
Type the position-type value, which can be one of the following:
static flows the content normally; however, the position cannot be changed using the values set by the top, left, right, and bottom properties or by JavaScript. This is the default value. relative also flows the element normally, but allows the position to be set, relative to its normal position, using the values set on the top, left, right, and bottom properties. absolute places the element according to values set by the top, left, right, and bottom properties, independently of any other content in its parent. This will be the body of the document or the element within which it is nested. fixed places the element according to the values set by the top, left, right, and bottom properties, independently of any other content in its parent, just as with an absolutely positioned element. However, unlike an absolutely positioned element, when the window is scrolled, the fixed element stays where it is as the rest of the content scrolls. inherit uses the position type of the element's immediate parent. If no position is set, this will default to static (see the sidebar "Inheriting Position Types").
Inheriting Position Types inherit is another value for positioning. It simply tells the element to use the same positioning type as its parent, overriding the default static value. This can be tricky to use, though, since tying the child's position type to its parent can radically alter the layout if you change the parent's position type. |
Is It Fixed? Not in IE on the Mac! Although Internet Explorer 5 for the Mac supports fixed, a strange bug causes the link areas of a fixed element to scroll with the rest of the page. So while the graphic or text for a link stays in a fixed position, the invisible area that gets clicked moves. However, since Internet Explorer for the Mac is rarely used, you probably should not let this stop you from using fixed positioning. |
| 3. | top: 70px;
Now that the position type has been set, as long as you didn't use static you can adjust or set the actual position of the element (see "Setting an Element's Position" later in this chapter). If you do not explicitly set a position, the element will default to auto, which is generally going to be its natural flow position.
|
In addition to setting the position of an element, you may want to set the following for an element: Stacking order, discussed in "Stacking Objects (3D Positioning)" later in this chapter Visibility, discussed in "Setting the Visibility of an Element" in Chapter 8 Clipping, discussed in "Setting the Visible Area of an Element (Clipping)" in Chapter 8
 Tips
You can position elements within other positioned elements. For example, you can set the relative position of a child element that is within an absolutely positioned parent or set the absolute position of an element within an absolutely positioned parent. Remember that the browser adds a margin to the body of your Web page by default, but this is not a consistent value across all browsers. To correct this, you should always set your own margin in the body tag, which allows you to position elements consistently. Just a reminder: fixed does not work in Internet Explorer before version 7. Instead, the element will be treated as static, unless you use conditional CSS presented in Chapter 2 to provide additional CSS code tailored to that browser. Internet Explorer does not obey positioning on the <body> tag. If you need to position the entire body of a Web page, surround all the content with a <div> tag and apply positioning to that. After an element's position type has been set to anything other than static, you can use JavaScript or other scripting languages to move, change the clip, change the stacking order, hide, or display it (see Part 2 of this book, which discusses DHTML). The fixed position in Internet Explorer 5 for the Mac has a severe bug that makes it useless for creating fixed menus in the window (see the sidebar "Is It Fixed? Not in IE on the Mac!"). Browsers that do not understand the fixed position type default to static for the position type.
|
