User:Bartlett/19
./ ADD NAME=CH19.HTML
Hour 19. Absolute and Fixed Positioning
What You'll Learn in This Hour:
|
./ 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.
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.
./ 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
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.
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.
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.
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.
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].
[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.
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.
|
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.
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.
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].
[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].
./ 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.
[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.
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.
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].
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].
./ 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.
|
| [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,./ ADD NAME=CH20.HTML