User:Bartlett/19

Ka Wiktionary

./ ADD NAME=CH19.HTML

Hour 19. Absolute and Fixed Positioning 
What You'll Learn in This Hour:
  • The types of positioning schemes available for placing a display box on the screen
  • How to place an HTML element in relation to its containing block
  • How to use CSS positioning to create a simple cartoon combining a photograph, text, and graphics
  • How to control clipped content that is larger than the size allotted to a display box
  • How to create rounded corners for boxes and position them with CSS
  • How to designate which items should appear in front or back when content is layered over other content
  • How to fix an HTML element on the screen, even if the page scrolls

./ ADD NAME=CH19LEV1SEC1.HTML

Positioning Content 

Whenever you include an HTML element on a page, it generates a display box, as you learned in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch06.html#ch06 Hour 6], "The CSS Box Model." Normally, these boxes are placed one after another or within another box, based on the structure of the document and whether the box is an inline or block box. This is known as normal flow in the CSS specifications. Whenever you move an element's display box to a new location, you are disrupting the normal flow to create a new layout.

One way to disrupt the normal flow of content is by using the float (and clear) properties, which you learned about in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch15.html#ch15 Hour 15], "Alignment." Floating content moves out of the normal order to one side or the other, and subsequent content flows around it.

Relative positioning preserves the normal content flow by reserving the appropriate amount of space for the relatively positioned element, and then moving it relative to that location.

There are two other types of positioning techniques you can use, called absolute and fixed positioning. These methods also use the position property and the four offset propertiestop, right, bottom, and leftintroduced in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch18.html#ch18 Hour 18], "Box Sizing and Offset," but the exact meanings of these properties are different from how they're used in relative positioning.

The first way to lay out the page with CSS is to use styles that position an element relative to a specific context on the page. The position property is used to choose that context. Positioned content is offset from the context by a specific amount that you can set with the top, right, bottom, or left properties.

By the Way As a historical footnote, the positioning properties in CSS were originally introduced in a draft produced between the CSS Level 1 and CSS Level 2 recommendations and were called CSS-P, for CSS Positioning. CSS-P properties were partially implemented by the browsers and were formally added to the CSS language when CSS Level 2 was released.
 The Containing Block 

To properly place a display box by using positioning styles, you must establish the context of that position. You accomplish this by using the position property, which defines how a box should be positioned. The values for the position property were listed in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch18lev1sec2.html#ch18table02 Table 18.2] in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch18.html#ch18 Hour 18]; the two we're concerned with in this hour are position: absolute and position: fixed.

When you set the position property to absolute, you are taking the element out of the normal flow of text and locating it relative to another box. This is called the containing block. The positioned element is placed relative to this containing block based on the offset properties top, right, bottom, and left.

The containing block is one of the parent boxes that contains the box being displayedbut it's not necessarily the immediate parent. The containing block is defined as the nearest ancestor to that box that has a position property value set on it (to something besides static). If none of the box's ancestors has a position property set, then the containing block is the display box of the <body> tag.

Did you Know? The easiest way to force a box to become a containing block for everything within itand thus change the context in which those elements are positionedis to set the position property of that box to relative. This tells the browser to reserve the space that the box would normally take up, and then move the box by the measurements given by the top, right, bottom, and left properties. If you don't set any values for the offsets, however, they default to 0and the box doesn't move. The effect of using position: relative without offsets is to simply create a new containing block context.
./ ADD NAME=CH19LEV1SEC2.HTML 
Absolute Positioning 

In absolute positioning, the display box is placed in relation to the containing block, offset by a certain amount. The box is removed from the normal flow, and in fact the space normally taken up by the absolutely positioned box isn't even allocated for it. Instead, it appears somewhere else, possibly even overlaying existing content.

The containing block in absolute positioning is initially set to be the box of the <body> tag, and absolutely positioned elements are placed relative to the rest of the page. However, if an ancestor box of an element is positioned (with absolute, relative, or fixed positioning), that positioned box becomes the new containing block for absolute positioning.

[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch19ex01 Listing 19.1] is a web page with embedded style sheet that sets the inner

to use absolute positioning, and specifies an offset of 4em on the left and top from the outer box, which has been set to position: relative to make it the new containing block for its children.
Listing 19.1. A Web Page Demonstrating Absolute Positioning
<!-- absolute-19.1.html --><br /><html><br /><head><br /><title>Three Boxes in a Row</title><br /><style type="text/css"><br />.demobox {<br />border: 3px solid black; width: 8em;<br />font-family: Verdana, sans-serif;<br />background-color: white;<br />padding: 1em; margin: 0.5em; }<br />#mars { position: absolute;<br />right: 2em; top: 6em; }<br /></style><br /></head><br /><body><br /><div class="demobox" id="earth"><br />Earth</div><br /><div class="demobox" id="mars"><br />Mars</div><br /><div class="demobox" id="jupiter"><br />Jupiter</div><br /></body><br /></html><br />

So what effect does the embedded style sheet have? [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch19fig01 Figure 19.1] shows absolute positioning at work. The middle box, Mars, has been removed entirely from its position in the normal flow of layout; unlike relative positioning, absolute positioning does not leave the appropriate space for the positioned object in its original position.

Figure 19.1. Absolute positioning is based on the containing block.
File:19fig01.jpg
 Offset Properties in Absolute Positioning 

The #mars box in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch19fig01 Figure 19.1] has been positioned at right: 2em and top: 6emthis is not relative to the original position, but to the containing block of the #mars box. In this case, there are no ancestors to #mars that have a position property, so the containing block is the <body> element of HTML. Thus, the right side of the box is placed 2 ems in from the right side of the browser's display area, and the top side of the box is placed 6 ems down from the top.

The top, right, bottom, and left properties have different meanings when used with absolute positioning than their meanings under relative positioning. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch19table01 Table 19.1] is a summary of these values and their effects; contrast this with [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch18lev1sec2.html#ch18table03 Table 18.3] in the last hour.

Value Effect
measurement Position the edge of the box toward the "inside" of the containing block
negative-measurement Position the edge of the box toward the "outside" of the containing block
percentage Position the edge of the box toward the "inside" of the containing block, as a percentage of the containing block's dimension
negative-percentage Position the edge of the box toward the "outside" of the containing block, as a percentage of the containing block's dimension

[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch19ex02 Listing 19.2] is a style sheet that can replace the embedded style sheet in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch19ex01 Listing 19.1] with one that uses percentages. (To make it more clear where the boxes meet, the margin property has been removed.)

Listing 19.2. Percentages for Absolute Positioning
/* absolute-19.2.css */<br />.demobox {<br />border: 3px solid black; width: 8em;<br />font-family: Verdana, sans-serif;<br />background-color: white;<br />padding: 1em; }<br />#mars { position: absolute;<br />right: 50%; bottom: 50%; }<br />#earth { position: absolute;<br />left: 50%; top: 50%;}<br />#jupiter { position: absolute;<br />left: -50%; bottom: 100%; }<br />

[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch19fig02 Figure 19.2] is the result of applying the style sheet in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch19ex02 Listing 19.2] to the HTML page in 19.1.

Figure 19.2. Percentages used to place boxes absolutely.
File:19fig02.jpg

Notice that the Mars and Earth boxes almost touch in the center. This is because they have values of 50% set for their right and left values, and 50% for their top and bottom values. However, the effects of these rules are not the same; 50% right and 50% left are two different positions. The right property lines up the right edge of the box along that halfway line, and the left property positions the left edge of the box at the same line.

There are three boxes in the HTML source code, but only two boxes in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch19fig02 Figure 19.2]. Where's Jupiter? The rule of -50% left moved the left side of the box half a screen's width off to the left of the display window. The bottom: 100% rule moved the bottom of the box a full screen's height up, so it's off the top of the screen. The Jupiter box is located off to the upper left, where we can't see it.

Watch Out! It's entirely possible to position a box off the visible part of the page. For example, if you use a value of -1000px for left and -800px for top, the box will probably be displaced completely off the page. Such a box still "exists," but just won't be seen. In some cases, this may be exactly what you wantin [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch24.html#ch24 Hour 24], "Troubleshooting and Browser Hacks," you'll learn how this type of technique can be used to hide content from certain browsers, with varying degrees of success.

You can also use the top, right, bottom, and left properties to place content atop existing content when you use absolute positioning. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch19ex03 Listing 19.3] is an HTML file that contains four elements to position: a picture of a coyote, a bit of text, a graphic of a triangle, and a picture credit.

Listing 19.3. Parts of a Cartoon to Be Positioned
<!-- cartoon-19.3.html --><br /><html><br /><head><br /><title>Coyote Cartoon</title><br /><style type="text/css"><br />body { font-family: Verdana, sans-serif; }<br />a:link, a:visited { <cs>text-decoration</cs>: none;<br />color: inherit; font-weight: bold; }<br />#cartoon { padding: 16px; margin: 10px auto;<br />border: 1px solid black; }<br />#bubble { font-size: 24px;<br />text-align: center;<br />border: 1px solid black;<br />background-color: white; color: black;<br />width: 250px; padding: 2px; }<br />#credits { font-size: 14px;<br />bottom: 16px; right: 20px; }<br /></style><br /></head><br /><body><br /><div id="cartoon"><br /><img src="coyote.jpg" alt="Coyote"><br /><div id="bubble"><br />Hey! I can see my house from here!<br /></div><br /><img src="balloontail.png" id="tail" alt=""><br /><div id="credits"><br />Picture by<br /><a href="http://kynn.com/">Kynn Bartlett</a><br /></div><br /></div><br /></body><br /></html><br />

The balloontail.png image is a simple black and white triangle made with a transparent section. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch19fig03 Figure 19.3] is a screen capture of the image creation process, with the transparent section shown in a gray checkerboard pattern.

Figure 19.3. Creating an image with a transparent section.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/19fig03_alt.jpg [View full size image]]
File:19fig03.jpg

Without any positioning properties, the cartoon appears as shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch19fig04 Figure 19.4].

Figure 19.4. Not very much of a cartoon, is it?
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/19fig04_alt.jpg [View full size image]]
File:19fig04.jpg

[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch19ex04 Listing 19.4] is a style sheet that can be embedded in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch19ex03 Listing 19.3] (or linked from it) to position each of the elements absolutely on top of the coyote's picture and assemble the cartoon properly.

Listing 19.4. Style Sheet to Lay Out the Cartoon
/* cartoon-19.4.css */<br />#cartoon { position: relative;<br />width: 600px; }<br />/* sets the containing block */<br />#bubble { position: absolute;<br />bottom: 340px; left: 215px; }<br />#tail { position: absolute;<br />bottom: 277px; left: 240px; }<br />#credits { position: absolute;<br />bottom: 16px; right: 20px; }<br />

You can see the results of this style sheet in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch19fig05 Figure 19.5]. The box is over the coyote's head, and the triangular wedge serves to show that the coyote is "speaking." The transparent section of the triangle graphic lets the coyote image show through the transparent area.

Figure 19.5. A cartoon built with CSS. Can you do better?
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/19fig05_alt.jpg [View full size image]]
File:19fig05.jpg

The 1px border of the word bubble is missing where it touches the balloontail.png graphic. This isn't a CSS trick; the graphic is simply positioned so that it overlaps, and thus covers, the border at that point. You'll learn more about controlling overlap of layered content later this hour.

Try it Yourself: Use Absolute Positioning to Create a Cartoon

This is your chance to express the budding cartoonist within you.

1.
Find a photograph you like. Maybe it's one you've taken, maybe it's one of you. Create an HTML page with that picture.

2.
Write some dialogue for the picture and add it to the HTML page. Set a class or id on the dialogue so you can position it.

3.
Create a "tail" graphic for your word balloon, or use a simple one like the one above (available from the book's website). Add a class or id here as well.

4.
Add a wrapper
around your cartoon, with a class or id property. This is important so that you can set the containing box in your CSS rules.

5.
Write the style sheet. The first thing you'll want to do is define the containing box by setting position: relative on your wrapper
; also give it a width and a border.

6.
Position the dialogue, using position: absolute and the offset properties (top, right, bottom, and left). Reload the page in your browser as you make changes; it could take several tries to position the box right where you want it to be.

7.
Put your word balloon "tail" in place. Again, this may require fine adjustments, possibly pixel-by-pixel, as you line it up just right.

> >
8.
View the cartoon in your web browser. If it looks good, you're ready to share this with your friends, who will delight in your wonderful sense of humor and thrill to your CSS positioning skills!

The clip Property 

In [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch18.html#ch18 Hour 18], you learned how you can clip content that extends out of the display box by using the overflow value of hidden.

Normally, only content that extends outside the display box is clipped. However, the clip property enables you to define a clipping area within an absolutely positioned box that defines where the content will be clipped. The types of values that can be set for the clip property are shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch19table02 Table 19.2]. The clip property is used only if the box's overflow value is not visible, and if the position value is absolute.

Value Effect
auto The clipping area is defined by the box's edges.
rect(top, right, bottom, left) The clipping area is a rectangle defined by four measurements.
inherit Use the value of clip set on the containing block.

When using the rect() function to define a clipping area, you're defining a subbox relative to the display box. The values top, right, bottom, and left are measurements (which can be ems, pixels, percentages, or other types of CSS measurement) which define where the box is clippedrelative to the upper-left corner of the box.

The easiest way to think of these values is to consider them a pair of points, the first in the upper-right corner and the second in the lower-left, which define the clipping area. For example, let's say you're using clipping on a box that is 400 pixels wide and 300 across, and you have written a rule such as this:

#box { overflow: hidden;
 clip: rect(0px, 300px, 200px, 100px);

This defines a clip area where one corner is at 400px to the right, 0px down, and the other corner is at 300px down, and 100px to the right. Thus the displayed area would be from 100px to 300px horizontally, and 0px to 200px vertically.

[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch19fig06 Figure 19.6] shows this rule in action, clipping text content down to size. Note that even the border is clipped; this clips the entire element box.

Figure 19.6. Clipped content, before and after.
File:19fig06.jpg

You can use clipped content with absolute positioning for some interesting effects. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch19ex05 Listing 19.5] is an HTML page with one graphic that will be placed in each corner of the content box.

Listing 19.5. A Text Box with Corner Graphics
<!-- corners-19.5.html --><br /><html><br /><head><br /><title>Rounded corners</title><br /><style type="text/css"><br />/* basic formatting styles */<br />body { font-family: Optima, Geneva, serif;<br />color: white; background-color: black; }<br />.section { margin: 2em; padding: 1em 2em;<br />color: black; background-color: white; }<br />h1, h2 { text-align: center; margin: 0;<br />font-variant: small-caps; }<br />p { text-indent: 3em; text-transform: uppercase; }<br /></style><br /></head><br /><body><br /><div class="section"><br /><img src="corners.png" alt=""<br />class="corner" id="topleft"><br /><img src="corners.png" alt=""<br />class="corner" id="topright"><br /><img src="corners.png" alt=""<br />class="corner" id="bottomleft"><br /><img src="corners.png" alt=""<br />class="corner" id="bottomright"><br /><h1>George L. Mountainlion</h1><br /><h2>Born February 1952</h2><h2>Died March 8, 1955</h2><br /><p>I freely give all sights and sounds of nature I<br />have known to those who have the grace to enjoy<br />not man-made materialism but God-made beauty.</p><br /><p>The magnificent Arizona sunsets I have watched<br />from my enclosure, I bequeath to all who see not<br />only with their eyes but with their hearts.</p><br /><!-- ... --><br /></div><br /></body><br /></html><br />

The corner graphic is simply a circle on a square black background, 32 pixels by 32 pixels. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch19fig07 Figure 19.7] shows the image being created in a simple graphics program.

Figure 19.7. Creating a graphic for rounded corners.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/19fig07_alt.jpg [View full size image]]
File:19fig07.jpg

Displayed without positioning and clipping properties added, the HTML page in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch19ex05 Listing 19.5] looks passable, but the corner images aren't in the corners, as shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch19fig08 Figure 19.8].

Figure 19.8. Unpositioned and unclipped corners.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/19fig08_alt.jpg [View full size image]]
File:19fig08.jpg

[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch19ex06 Listing 19.6] is a style sheet that uses absolute positioning to position the graphic, and then clips off everything except the appropriate corner of the circle.

Listing 19.6. Positioning and Clipping Round Corners
/* corners-19.6.css */<br />.section { position: relative; }<br />.corner { position: absolute; }<br />#topleft { top: 0px; left: 0px;<br />overflow: hidden;<br />clip: rect(0px, 16px, 16px, 0px); }<br />#topright { top: 0px; right: 0px;<br />overflow: hidden;<br />clip: rect(0px, 32px, 16px, 16px); }<br />#bottomleft { bottom: 0px; left: 0px;<br />overflow: hidden;<br />clip: rect(16px, 16px, 32px, 0px); }<br />#bottomright { bottom: 0px; right: 0px;<br />overflow: hidden;<br />clip: rect(16px, 32px, 32px, 16px); }<br />

You can see the properly positioned and clipped corner graphics in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch19fig09 Figure 19.9].

Figure 19.9. Rounded corners, positioned and clipped.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/19fig09_alt.jpg [View full size image]]
File:19fig09.jpg
./ ADD NAME=CH19LEV1SEC3.HTML

Layered Content[wax ka badal]

As you've seen in the coyote cartoon example, content can be positioned into a location already occupied by something else through the use of absolute (or relative) positioning. Each of the overlapping display boxes can be thought of as existing in a third dimension, as if it were printed on a piece of clear plastic. This is commonly referred to as a layer.

By the Way Netscape 4 also used the term layer to refer to the nonstandard <layer> tag. The <layer> tag should be avoided because it is not part of the HTML specification and is not widely supported by browsers. In this book, layering refers to creating distinct, overlapping boxes with CSS and does not refer to the <layer> tag.

[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch19ex07 Listing 19.7] is a simple logo designed in HTML and CSS. The intent is to create a box with "Pie Walkers of Tucson" in the foreground, and a large pi (π) symbol in the background.

Listing 19.7. Content to Be Displayed in Overlapping Layers
<!-- layers-19.7.html --><br /><html><br /><head><br /><title>Pie Walkers of Tucson</title><br /><style type="text/css"><br />body { font-family: Arial, sans-serif; }<br />.pwlogo { position: relative; overflow: hidden;<br />height: 175px; width: 350px;<br />border: 2px solid black;<br />margin: 10em auto; }<br />.pwlogo span { display: block; }<br />.pwlogo .pi { font: 360px bold Verdana, sans-serif;<br />position: absolute; color: silver;<br />left: 40px; top: -165px; }<br />.pwlogo .pw { font: 60px "Times New Roman", serif;<br />position: absolute;<br />font-variant: small-caps;<br />left: 10px; top: 10px; }<br />.pwlogo .of { font: 70px oblique bold Papyrus, cursive;<br />position: absolute; color: gray;<br />left: 150px; top: 30px; }<br />.pwlogo .tucson { font: 60pt bold Verdana, sans-serif;<br />position: absolute;<br />text-transform: uppercase;<br />bottom: 5px; right: 5px; }<br /></style><br /></head><br /><body><br /><div class="pwlogo"><br /><span class="pw">Pie Walkers</span><br /><span class="of">of</span><br /><span class="tucson">Tucson</span><br /><span class="pi">π</span><br /></div><br /></body><br /></html><br />

In [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch19fig10 Figure 19.10], you can see the layered effect, as each display box is placed over another. However, there's a problem! The boxes are not in a sensible order. The pi symbol covers everything else. There are two ways to fix this: first, by changing the order of the HTML tags, and second, by using the z-index property.

Figure 19.10. One box is laid over another, making the logo unreadable.
File:19fig10.jpg
 The z-index Property 

Each layer is placed in the order it appears in the HTML source code, with subsequent layers placed on top of earlier ones. This order can be changed with the z-index property. Values for z-index are numbers that indicate the layering order. A lower number goes on the bottom, and a higher number goes on the top.

Did you Know? The property name z-index comes from basic geometry. Horizontal placement is said to be along the x-axis, vertical along the y-axis, and third-dimensional placementout of the page or the screenis along the z-axis.

The style sheet in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch19ex08 Listing 19.8] reassigns the layering order by using the z-index property. As you can see, you can skip numbers, so you don't have to assign them sequentially; all the layers are considered and then sorted so the highest are on top, even if there are gaps in the sequence.

Listing 19.8. Style Sheet to Change the Order of Layering
/* layers-19.8.css */<br />.pwlogo .pi { z-index: 1; }<br />.pwlogo .pw { z-index: 10; }<br />.pwlogo .of { z-index: 3; }<br />.pwlogo .tucson { z-index: 5; }<br />

Applying this style sheet to the HTML page in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch19ex07 Listing 19.7] results in the layering order shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch19fig11 Figure 19.11].

Figure 19.11. The layers are now in the desired order.
File:19fig11.jpg
./ ADD NAME=CH19LEV1SEC4.HTML 
Fixed Positioning 

In fixed positioning, a box placed on the screen doesn't move even if the rest of the page moves; it seems to float above the rest of the content without leaving its original position. This is useful if you want to create a menu bar or graphic that never leaves the page. A box placed according to fixed positioning is located in relation to the whole page, not to its containing block or its original position. Like absolute positioning (and unlike relative positioning), no space is set aside for the box in its normal flow location.

The style sheet in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch19ex09 Listing 19.9] uses fixed positioning to set both a bar at the top that never goes away, and a "back to top" button that always stays fixed in the lower right corner. The full text of "The War Prayer" is omitted in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch19ex09 Listing 19.9], but you can view the entirety on the book's website, to test scrolling with fixed positioning.

Listing 19.9. Using Fixed Positioning
<!-- fixed-19.9.html --><br /><html><br /><head><br /><title>Page with a lot of text</title><br /><style type="text/css"><br />.section { margin: 0 8em; }<br />.topbar {<br />position: fixed; top: 0; left: 0;<br />width: 100%;<br />background-color: black; color: white; }<br />.backtotop {<br />background-color: white;<br />border: 1px solid black;<br />position: fixed; bottom: 1em; right: 1em; }<br /></style><br /></head><br /><body><br /><div class="topbar"><br />You are reading:<br /><cite>The War Prayer</cite> by Mark Twain<br /></div><br /><div class="section"><br /><h1><a name="top">The War Prayer by Mark Twain</a></h1><br /><p> It was a time of great and exalting excitement.<br /><!-- ... --><br /></div><br /><div class="backtotop"><br /><a href="#top">Back to top</a><br /></div><br /></body><br /></html><br />

The effects of fixed positioning are shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch19fig12 Figure 19.12].

Figure 19.12. Objects fixed in position don't move when the rest of the page scrolls.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/19fig12_alt.jpg [View full size image]]
File:19fig12.jpg
./ ADD NAME=CH19LEV1SEC5.HTML 
Summary 

Display boxes can be moved from their original positions in the normal flow of layout by using the position property. The position property selects among four different types of positioning schemes. Absolute positioning places the HTML element in a new location within or relative to its containing block. Fixed positioning locates the display box on a set position on the screen, even if the page scrolls.

Placement of boxes in the context of their positioning schemes is determined by the values of the offset properties: left, right, top, and bottom. These can be measurements or percentages, with a positive value moving in the direction of the center of the containing block, and a negative value moving away from it. Care needs to be taken when placing boxes so that content isn't obscured or moved off the visible part of the page entirely. Absolutely positioned content that overflows its box can be clipped with the clip property.

In addition to existing in two dimensions, CSS boxes occupy a third dimension, as well, that determines which boxes are layered on top of other boxes if the content overlaps. The order of layering can be set with the z-index property.

./ ADD NAME=CH19LEV1SEC6.HTML 
Workshop 

The workshop contains a Q&A section, quiz questions, and an exercise to help reinforce what you've learned in this hour. If you get stuck, the answers to the quiz can be found after the questions.

 Q&A
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch19qa1q1a1 Q.] My clip rule isn't working right, and I am following the CSS spec exactly! The clipped element doesn't appear at all. What's wrong?
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch19qa1q1 A.] The problem here is an unclear specification. You might assume that the dimensions for rect() are like those of relative offsetsthat each one specifies how to adjust the sides, with positive changes being toward the middle of the box. This is a natural assumption when you're working with positioning CSS, but it's not the case at all. Instead, a rect() defines a rectangle within the content box. As explained in this hour, it's easiest to think of the rect() values as a pair of coordinates for the upper-right and lower-left corners.
Quiz
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch19qa2q1a1 1.] Which of the following best describes absolute positioning?
#
Subsequent text is flowed around the positioned box, relative to the box's new left or right location.
  1. The box is held in location relative to where it is located, even if the page is scrolled.
  2. Relative to the box's original location, the box is offset by a certain distance.
  3. The box is placed relative to its containing box.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch19qa2q2a2 2.] The three
elements in the following snippet of HTML are placed with absolute positioning. What letter will be seen and why?
<div style="position: absolute; top: 0px; left: 0px;<br />background-color: white; width: 2em; z-index: 10;">K</div><br /><div style="position: absolute; top: 0px; left: 0px;<br />background-color: white; width: 2em; z-index: 1;">L</div><br /><div style="position: absolute; top: 0px; left: 0px;<br />background-color: white; width: 2em; z-index: 6;">B</div><br />

[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch19qa2q3a3 3.] You have an <img> tag that is 450 pixels wide and 300 pixels tall. The graphic is composed of nine images of television actors in a three by three grid, each cell 150 pixels wide by 100 pixels tall. You want to show only the face of the youngest one, in curls, in the lower left cell. How do you use clip to show only that portion of the image?
Answers
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch19qa2q1 1.] Absolute positioning is choice (c). Choice (c) is a description of relative positioning (from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch18.html#ch18 Hour 18]), (a) describes floating content (from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch15.html#ch15 Hour 15]), and (b) describes fixed positioning.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch19qa2q2 2.] The letter K. Because they are all placed in the same location, the one that is displayed will be the
on the top of the stacking order. The highest z-index value is 10, and so the letter K will be visible. (Technically, the other letters are visible, too; we just can't see them.)
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch19qa2q3 3.] Here is the type of rule you would write:
img#bunch {<br />overflow: hidden;<br />clip: rect(150, 200, 0, 300); }<br />

Did you remember that you needed to change the overflow value from the default of visible to be able to use clip? The values for rect() come from the coordinates for the upper-left corner and the lower-right corner of the portion that should be displayedthe points (150,200) and (0,300), respectively.

Exercise 

Placing boxes on the screen can seem arcane until you get plenty of practice with it. In [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch20.html#ch20 Hour 20], "Page Layout in CSS," you're going to see how to bring together what you've learned to lay out a page effectively. But you have the tools already to get started on positioning content blocks, and exercising your use of absolute and fixed positioning will help you prepare.

Begin by creating a simple HTML page with a number of different elementssome headers, a few images,
elements containing sections of text, some lists of linksand start placing them with absolute (or fixed) positioning. After you've got them where you want them...move them! The power of CSS-based positioning lets you move sections of your page around the screen by simply changing offset property values, thus enabling you to re-order the entire page without changing the HTML. Try it, and practice it until you've fully grasped the implications; then you'll be ready for the next hour!
./ ADD NAME=CH20.HTML