Section 12.1. How Positioning Properties Work


12.1. How Positioning Properties Work

The 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:

  • Absolute . Absolute positioning lets you determine an element's location by specifying a left, right, top , or bottom position in pixels, ems, or percentages. (See Chapter 6 for more on picking between the different units of measurement.) You can place a box 20 pixels from the top and 200 pixels from the left edge of the page, as shown in Figure 12-1, middle. (More in a moment on how you actually code these instructions.)

    In addition, absolutely positioned elements are completely detached from the flow of the page as determined by the HTML code. In other words, other things on the page don't even know that the absolutely positioned element exists. They can even disappear completely underneath absolutely positioned items, if you're not careful.


    Note: Don't try to apply both the float property and any type of positioning other than static (explained below) or relative to the same style. Float and absolute or fixed positioning can't work together on the same element.
  • Relative . A relatively positioned element is placed relative to its current position in the HTML flow. So, for example, setting a top value of 20 pixels and left value of 200 pixels on a relatively positioned headline moves that headline 20 pixels down and 200 pixels from the left from wherever it would normally appear .

    Unlike with absolute positioning, other page elements accommodate the old HTML placement of a relatively positioned element. Accordingly, moving an element with relative positioning leaves a "hole" where the element would have been. Look at the dark strip in the bottom image of Figure 12-1. That strip is where the relatively positioned box would have appeared, before it was given orders to move. The main benefit of relative positioning isn't to move an element, but to set a new point of reference for absolutely positioned elements that are nested inside it. (More on that brain-bending concept in Section 12.1.2.)

  • Fixed . A fixed element is locked into place on the screen. It does the same thing as the fixed value for the background-attachment property (Section 8.4.4). When a visitor scrolls the page, fixed elements remain onscreen as paragraphs and headlines, while photos disappear off the top of the browser window.

    Fixed elements are a great way to create a fixed sidebar or replicate the effect of HTML frames , where only a certain portion (frame) of the page scrolls.

  • Static positioning simply means the content follows the normal top-down flow of HTML (see Figure 12-1, top). Why would you want to assign an element static positioning? The short answer: You probably never will.

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 Values

The 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 Relative

So 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 :

  • A tag is positioned relative to the browser window if it has an absolute position and it's not inside any other tag that has absolute, relative, or fixed positioning applied to it.

  • A tag is positioned relative to the edges of another element if it's inside another tag with absolute, relative, or fixed positioning.

12.1.3. When (and Where) to Use Relative Positioning

You 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.
Second from top: Adding absolute positioning to the buttonright: -35px; top: -35px;moves it outside of the <h1> tag area and places it in the top-right corner of the browser window (circled). (In fact, it's placed a little outside of the browser window thanks to the negative positioning values.)
Third from top: Adding position: relative to the <h1> creates a new positioning context for the <img> tag. The same top and right values move the <img> tag to the <h1> tag's top-right corner.
Bottom: When you move the heading down the page, the graphic goes along for the ride.

 h1 {  position: relative;  } h1 img {     position: absolute;     top: 0;     right: 0; } 

Setting the image's top and right properties to places the image in the upper-right corner of the headlinenot the browser window.

In CSS, the term relative doesn't exactly mean the same thing as in the real world. After all, if you want to place the <img> tag relative to the <h1> tag, your first instinct may be to set the image's position to relative. In fact, the item that you want to positionthe imagegets an absolute position, while the element you want to position the element relative to the headlinegets a setting of relative. Think of the relative value as meaning "relative to me." When you apply relative positioning to a tag, it means "all positioned elements inside of me should be positioned relative to my location."


Note: Because you'll often use relative positioning merely to set up a new positioning context for nested tags, you don't even need to use the left, top, bottom, or right settings with it. The <h1> tag has position: relative , but no left, top, right, or bottom values.
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.


12.1.4. Stacking Elements

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.

Figure 12-6. When you use z-index to control how positioned elements are stacked, parent elements define the stacking order for their children. In the top two examples, the text box isn't positioned, so it shares the zindex of the page itself, which has a zindex value of 0. So the buttons in those two text boxes are stacked relative to and above the page. But the text box in the bottom image has an absolute position and a z-index of 1000. This containing <div> becomes the starting point for stacking the images inside it. So even though the div's z-index is 1000, its nested children (with lower z-index values) appear on top of it, while the text box itself, sits above 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).


Tip: It's perfectly OK to have gaps in z-index values. In other words, 10, 20, 30 does the exact same things as 1, 2, 3 . In fact, spreading out the numerical values gives you room to insert more items into the stack later. And, when you want to make sure nothing ever appears on top of a positioned element, give it a really large z-index, like this: z-index: 10000 ;.

12.1.5. Hiding Parts of a Page

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.


Tip: For a basic CSS method of adding pop-up tool tipsadditional information that appears when someone mouses over a linkcheck out: http://psacake.com/web/jl.asp. You also have many JavaScript options to choose from: solarDreamStudios offers a simple tutorial at http://solardreamstudios.com/learn/css/qtip. For a version that's a bit fancier, but still easy to add to a Web page, go to http://web-graphics.com/mtarchive/001717.php.


CSS[c] The Missing Manual
Dreamweaver CS3: The Missing Manual
ISBN: 0596510438
EAN: 2147483647
Year: 2007
Pages: 154

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net