12.1. How Positioning Properties WorkThe CSS position property lets you control how and where a Web browser displays particular elements. Using position you can, for example, place a sidebar anywhere you wish on a page, or make sure a navigation bar at the top of the page stays in place even when visitors scroll down the page. CSS offers four types of positioning:
Figure 12-1. CSS offers several ways to affect an element's placement on a Web page. The static option, top, is the way browsers have presented content since the beginning of the Web. They simply display the HTML in top-to-bottom order. Absolute positioning (middle) removes an element from the page flow, placing it on top of the page, sometimes overlapping other content. Relative positioning (bottom) places an element relative to where it would normally appear on the page, and leaves a hole (the dark background here) where that element would've been without relative positioning.Note: Internet Explorer 6 (and earlier versions) doesn't understand the fixed setting and ignores it. Since IE 6 is still the most popular browser out there, this book doesn't deal much with fixed positioning. But you can find a quick overview in Section 12.2.4. To change the positioning of any element, simply use the position property followed by one of the four keywords: static, absolute, relative, fixed . To create an absolutely positioned element, add this property to a style: position: absolute; Static is the normal positioning method, so unless you're overriding a previously created style that already has a position of absolute, relative or fixed , you won't need to specify that. In addition, static elements don't obey any of the positioning values discussed next . Setting a positioning value is usually just part of the battle. To actually place an element somewhere on a page, you need to master the various positioning properties. 12.1.1. Setting Positioning ValuesThe display area of a Web browser windowalso called the viewport has top, bottom, left, and right edges. Each of the four edges has a corresponding CSS property: top, bottom, left , and right . But you don't need to specify values for all four edges. Two are usually enough to place an item on the page. You can, if you want, place an element 10ems from the left edge of the page and 20ems from the top. Note: Internet Explorer sometimes misplaces elements that are positioned with the bottom or right properties. See the box in Section 12.1.4. To specify the distance from an edge of a page to the corresponding edge of the element, use any of the valid CSS measurementspixels, ems, percentages, and so on. You can also use negative values for positioning like left: -10px ; to move an element partly off the page (or off another element) for visual effect, as you'll see later in this chapter (Section 12.2.2). After the position property, you list two properties ( top, bottom, left , or right ). If you want the element to take up less than the available width (to make a thin sidebar, for example), then you can set the width property. To place a page's banner in an exact position from the top and left edges of the browser window, create a style like this: #banner { position: absolute; left: 100px; top: 50px; width: 760px; } This style places the banner as pictured in Figure 12-2, top. Figure 12-2. One useful aspect of absolute positioning is the ability to place an item relative to the right edge of the browser window (middle). Even when the width of the browser changes, the distance from the right edge of the window to the right edge of the positioned element stays the same (bottom).Here's another example: placing an element so it always remains a fixed distance from the right side of the browser. When you use the right property, the browser measures the distance from the right edge of the browser window to the right edge of the element (Figure 12-2, middle). To position the banner 100 pixels from the right edge of the window, you'd create the same style as above, but simply replace left with right : #banner { position: absolute; right: 100px; top: 50px; width: 760px; } Since the position's calculated based on the right edge of the browser window, adjusting the size of the window automatically repositions the banner, as you can see in Figure 12-2, bottom. Although the banner moves, the distance from the right edge of the element to the right edge of the browser window remains the same. Note: When you use percentages to specify top and bottom distances, the distance is calculated as a percentage of the width of the browser window (or, as you'll see in the next section, a positioned parent), not its height. See the box in Section 7.5.1 for more detail. Technically, you can specify both left and right position properties and let a browser determine the width of the element. Say you want a central block of text positioned 100 pixels from the top of the window and 100 pixels from both the left and right edges of the window. To position the block, you can use an absolutely positioned style that sets the top, left , and right properties to 100 pixels. In a browser window, the left edge of the box starts 100 pixels from the left edge of the window and the right edge extends to 100 pixels from the right edge (Figure 12-3, top). The exact width of the box, then, depends on how wide the browser window is. A wider window makes a wider box; a thinner window, a thinner box. The left and right positions , however, remain the same. Unfortunately, though, Internet Explorer 6 (and earlier) doesn't get this right (see Figure 12-3, bottom). That browser displays the left position correctly, but simply ignores any right value. So until IE 6 isn't around anymore, you're better off sticking with either left or right and using the width property to specify the width of an absolutely positioned element. The width and height properties, which you learned about in Chapter 7, work exactly the same way for positioned elements. To place a 50 x 50 pixel gray box in the top-right corner of the browser window, create this style: .box { position: absolute; right: 0; top: 0; width: 50px; height: 50px; background-color: #333; } The same caveat mentioned in Section 7.5.2 applies here as well: Be careful with setting heights on elements. Unless you're styling a graphic with a set height, you can't be sure how tall any given element will be on a page. You might define a sidebar to be 200 pixels tall, but if you end up adding enough words and pictures to make the sidebar taller than 200 pixels, then you end up with content spilling out of the sidebar. Even if you're sure the content fits, a visitor can always pump up the size of her browser's font, creating text that's large enough to spill out of the box. Furthermore, when you specify a width and height in a style and the contents inside the styled element are wider or taller, strange things can happen. (See the box in Section 7.5.2 for a discussion of how to use the CSS overflow property to control this situation.) Figure 12-3. Working with absolute positioning can be tricky. In this case, given just left and right positions, Firefox correctly calculates the width of the gray box (top). Internet Explorer 6, however, doesn't follow the same rules. It ignores the right value and sets the width of the box based on the width of its contents.12.1.2. When Absolute Positioning Is RelativeSo far, this chapter has talked about positioning an element in an exact location in the browser window. However, absolute positioning doesn't always work that way. In fact, an absolutely positioned element is actually placed relative to the boundaries of its closest positioned ancestor . Simply put, if you've already created an element with absolute positioning (say a <div> tag that appears 100 pixels down from the top of the browser window), then any absolutely positioned elements with HTML inside that <div> tag are positioned relative to the div's top, bottom, left, and right edges. Note: If all this talk of parents and ancestors doesn't ring a bell, then turn to Section 3.1 for a refresher. In the top image of Figure 12-4, the light grey box is absolutely positioned 5ems from the top and left edges of the browser window. Figure 12-4. You can place an element relative to the browser window (top), or relative to a positioned ancestor (bottom).There's also a <div> tag nested inside that box. Applying absolute positioning to that <div> positions it relative to its absolutely positioned parent . Setting a bottom position of doesn't put the box at the bottom of the screen; it places the box at the bottom of its parent. Likewise, a right position for that nested <div> refers to the right of the edge of its parent (Figure 12-4, bottom). Whenever you use absolute positioning to place an element on the page, the exact position depends upon the positioning of any other tags the styled element is nested in. Here are the rules in a nutshell :
12.1.3. When (and Where) to Use Relative PositioningYou get one big benefit from placing an element relative to another tag: If that tag moves, the positioned element moves along with it. Say you place an image inside an <h1> tag and you want the image to appear on the right edge of that <h1> tag. If you simply position the image in an exact spot in the browser window on the left edge of the <h1> tag, you're taking your chances . If the <h1> moves, the absolutely positioned image stays glued to its assigned spot. Instead, what you want to do is position the image relative to the <h1> tag, so that when the headline moves, the image moves with it (bottom two images in Figure 12-5). Note: Use the background-image property (see Section 8.2) to place an image into the background of an <h1> tag. But if the graphic's taller than the <h1> tag, or you want the graphic to appear outside the boundaries of the headline (see the example third from the top in Figure 12-5), then use the relative positioning technique described here. You could use the position property's relative value to place the image, but that has drawbacks, too. When you set an element's position to relative and then place itmaybe using the left and top propertiesthe element moves the set amount from where it would normally appear in the flow of the HTML. In other words, it moves relative to its current position. In the process, it leaves a big hole where it would've been if you hadn't positioned it at all (Figure 12-1, bottom). Usually that's not what you want. A better way to use relative positioning is to create a new positioning context for nested tags. For instance, the <h1> tag in the example at the beginning of this section is an ancestor of the <img> tag inside it. By setting the position of the <h1> tag to relative , any absolute positioning you apply to the <img> tag is relative to the four edges of the <h1> tag, not the browser window. Here's what the CSS looks like: Figure 12-5. Top: A graphical button (circled) is placed inside an <h1> tag. |
BROWSER BUG IE Forgets Its Place |
Place Sometimes, you'll use the bottom and right positioning properties to place something at a page's lower-right corner or to put something in a low corner of another element. Say you want to place a Contact Us link in the lower-left corner of a banner. If the style for the banner has either absolute or relative positioning and you position the link absolutely, then most browsers position the link relative to the banner's edges, as they should. But not Internet Explorer 6 and earlier. Seemingly straightforward properties like bottom and right can confound this ornery browser. IE sometimes continues to use the bottom and right edges of the Web page as a reference, so you'll end up with a positioned element way lower or further to the right than you expected. Like most other IE bugs , this one's been fixed in Internet Explorer 7. The fix is to give the containing element (the element you want to position something relative to, like the banner in this example) a special IE-only property known as layout . If you use the bottom or right properties on an absolutely positioned element, and IE places that element in a different location than other browsers, turn to Section 11.1 in Chapter 11 and apply one of the solutions described there. You'll see examples of this problem (and its solution) throughout this chapter. |
As you can see in Figure 12-6, absolutely positioned elements sit "above" your Web page, and can even reside on top of (or underneath) other positioned elements. This stacking of elements takes place on what's called the z-index . If you're familiar with the concept of layers in Photoshop, Fireworks, or Adobe InDesign, then you know how the z-index works: It represents the order in which positioned elements are stacked on top of the page.
To put it another way, think of a Web page as a piece of paper and an absolutely positioned element like a sticky note. Whenever you add an absolutely positioned element to a page, it's like slapping a sticky note on it. Of course, when you add a sticky note, you run the risk of covering up anything written on the page below.
Normally, the stacking order of positioned elements follows their order in the page's HTML code. On a page with two absolutely positioned <div> tags, the <div> tag that comes second in the HTML appears above the other <div>. But you can control the order in which positioned elements stack up using the CSS z-index property. The property gets a numeric value, like this:
z-index: 3;
The larger the value, the closer to the top of the stack an element appears. Say you have three absolutely positioned images, and parts of each image overlap. The one with the larger z-index appears on top of the others (see Figure 12-6, top). When you change the z-index of one or more images, you change their stacking order (Figure 12-6, middle).
Another CSS property often used with absolutely positioned elements is visibility , which lets you hide part of a page (or show a hidden part). Say you want a label to pop into view over an image when a visitor mouses over it. You make the caption invisible when the page first loads ( visibility: hidden ), and switch to visible ( visibility: visible ) when the mouse moves over it. Figure 12-7 shows an example.
The visibility property's hidden value is similar to the display property's none value (see Section 7.3), but there's a fundamental difference. When you set an element's display property to none , it literally disappears from the page without a trace. However, setting the visibility property to hidden prevents the browser from displaying the element's contents, but leaves an empty hole where the element would have been. When applied to absolutely positioned elements which are already removed from the flow of the page, visibility: hidden and display: none behave identically.
The most common way to switch an element from hidden to displayed and back again is with JavaScript. But you don't have to learn JavaScript programming to use the visibility property (or, for that matter, the display property). You can use the :hover pseudo-class (see Section 3.1) to make an invisible element visible.