Part III: CSS for Presentation 296 Relative Positioning fixed The distinguishing characteristic of fixed positioning is that the element stays in one position in the window even when the document scrolls. Fixed elements are removed from the document flow and positioned relative to the browser window (or other viewport). rather than another element in the document. Specifying position Once you’ve established the positioning method, the actual position is speci- fied with four offset properties. top, right, bottom, left Values: length measurement | percentage | auto | inherit Default: auto Applies to: Positioned elements (where position value is relative , absolute , or fixed ) Inherits: no The values provided for each of the offset properties defines the distance the element should be moved away from that respective edge. For example, the value of top defines the distance the top outer edge of the positioned ele- ment should be offset from the top edge of the browser or other containing element. A positive value for top results in the element box moving down by that amount. Similarly, a positive value for left would move the positioned element to the right (toward the center of the containing block) by that amount. Further explanations and examples of the offset properties will be provided in the discussions of each postioning method. We’ll start our exploration of positioning with the fairly straightforward relative method. Relative Positioning As mentioned previously, relative positioning moves an element relative to its original spot in the flow. The space it would have occupied is preserved and continues to influence the layout of surrounding content. This is easier to understand with a simple example. Here I’ve positioned an inline em element (a background color makes its boundaries apparent). First, I used the position property to set the method to relative, then I used the top offset property to move the element 30 pixels down from its initial position, and the left property to move it 60 pixels to the right. Remember, offset property values move the element away from the specified edge, so if you want something to move to the right, as I did here, you use the left offset property. The results are shown in Figure 15-10. N o t e Negative values are acceptable and move the element in the opposite directions. For example, a negative value for top would have the effect of moving the element up. N o t e Negative values are acceptable and move the element in the opposite directions. For example, a negative value for top would have the effect of moving the element up. Absolute Positioning Chapter 15, Floating and Positioning 297 em { position: relative; top: 30px; left: 60px; background-color: fuchsia; } 30px 60px Figure 15-10. When an element is positioned with the relative method, the space it would have occupied is preserved. I want to point out a few things that are happening here. The original space in the document flow is preserved. You can see that there is a blank space where the emphasized text would have been if the element had not been positioned. The surrounding con- tent is layed out as though the element were still there, therefore we say that the element still “influences” the surrounding content. Overlap happens. Because this is a positioned element, it can potentially overlap other ele- ments, as shown in Figure 15-10. The empty space left behind by relatively positioned objects can be a little awk- ward, so this method is not used as often as floating and absolute positioning. However, relative postioning is commonly used to create a positioning context for an absolutely positioned element, as I’ll explain in the next section. Absolute Positioning Absolute positioning works a bit differently and is actually a more flexible meth- od for achieving page layouts than relative positioning. Now that you’ve seen how relative positioning works, let’s take the same example as shown in Figure 15-l0, only this time we’ll change the value of the position property to absolute. em { position: absolute; top: 30px; left: 60px; background-color: fuchsia; } Part III: CSS for Presentation 298 Absolute Positioning 30px 60px Figure 15-11. When an element is absolutely positioned, it is removed from the flow and the space is closed up. As you can see in Figure 15-11, the space once occupied by the em element is now closed up, as is the case for all absolutely positioned elements. In its new position, the element box overlaps the surrounding content. In the end, absolutely positioned elements have no influence whatsoever on the layout of surrounding elements. The most significant difference here, however, is the location of the floated element. This time, the offset values position the em element 30 pixels down and 60 pixels from the top-left corner of the browser window. But, wait. Before you start thinking that absolutely positioned elements are always placed relative to the browser window, I’m afraid that there’s more to it than that. What actually happens in absolute positioning is that the element is posi- tioned relative to its nearest containing block. It just so happens that the near- est containing block in Figure 15-11 is the root (html) element (also known as the initial containing block), so the offset values position the em element relative to the whole browser window area. Getting a handle on the containing block concept is the first step to taking on absolute positioning Containing blocks The CSS2.1 Recommendation states, “The position and size of an element’s box(es) are sometimes calculated relative to a certain rectangle, called the containing block of the element.” It is critical to have an awareness of the containing block of the element you want to position. CSS2.1 lays out a number of intricate rules for determining the containing block of an element, but it basically boils down to this: Absolute Positioning Chapter 15, Floating and Positioning 299 If the positioned element is not contained within another positoned ele- ment, then it will be placed relative to the initial containing block (created by the html element). But if the element has an ancestor (i.e. is contained within an element) that has its position set to relative, absolute, or fixed, the element will be positioned relative to the edges of that element instead. Figure 15-11 is an example of the first case: the p element that contains the absolutely positioned em element is not positioned itself, and there are no other positioned elements higher in the hierarchy, therefore the em element is positioned relative to the initial containing block, which is equivalent to the browser window area. Let’s deliberately turn the p element into a containing block and see what happens. All we have to do is apply the position property to it; we don’t have to actually move it. The most common way to make an element into a con- taining block is to set the position to relative, but don’t move it with offset values. (By the way, this is what I was talking about earlier when I said that relative positioning is most often used to create a context for an absolutely positioned element.) We’ll keep the style rule for the em element the same, but we’ll add a posi- tion property to the p element, thus making it the containing block for the positioned em element. Figure 15-12 shows the results. p { position: relative; padding: 15px; background-color: #DBFDBA; border: 2px solid #6C4788; } 30px 60px Figure 15-12. The positioned p element acts as a containing block for the em element. • • N o t e Some browsers base the initial containing block on the body element. The net result is the same in that it fills the browser window. N o t e Some browsers base the initial containing block on the body element. The net result is the same in that it fills the browser window. Or, to put it another way The containing block for an absolutely positioned element is the nearest positioned ancestor element (that is, any element with a value for position other than static ). If there is no containing block present (in other words, if the positioned element is not contained within another positioned element), then the initial containing block (created by the html element) will be used instead. Or, to put it another way The containing block for an absolutely positioned element is the nearest positioned ancestor element (that is, any element with a value for position other than static ). If there is no containing block present (in other words, if the positioned element is not contained within another positioned element), then the initial containing block (created by the html element) will be used instead. Part III: CSS for Presentation 300 Absolute Positioning You can see that the em element is now positioned 30 pixels down and 60 pixels from the top-left corner of the paragraph box, not the browser window. Notice also that it is positioned relative to the padding edge of the paragraph (just inside the border), not the content area edge. This is the normal behavior when block elements are used as containing blocks (see note). I’m going to poke around at this some more to reveal additional aspects of absolutely positioned objects. This time, I’ve added width and margin proper- ties to the positioned em element (Figure 15-13). em { width: 200px; margin: 25px; position: absolute; top: 30px; left: 60px; background-color: fuchsia; } 60px 25px 30px Figure 15-13. Adding a width and margins to the positioned element. Here we can see that: The offset values apply to the outer edges of the element box (from mar- gin edge to margin edge), and Absolutely positioned elements always behave as block-level elements. For example, the margins on all sides are maintained even though this is an inline element. It also permits a width to be set for the element. • • N o t e When inline elements are used as con- taining blocks (and they can be), the positioned element is placed relative to the content area edge, not the padding edge. N o t e When inline elements are used as con- taining blocks (and they can be), the positioned element is placed relative to the content area edge, not the padding edge. Absolute Positioning Chapter 15, Floating and Positioning 301 It is important to keep in mind that once you’ve positioned an element, it becomes the new containing block for all the elements it contains. Consider this example in which a div named “content” is positioned in the top-left corner of the page. When a positioned list item within that div is given offset values that place it in the top-right corner, it appears in the top-right corner of the contents div, not the entire page (Figure 15-14). That is because once the div is positioned, it acts as the containing block for the li element. The markup: <div id="preface"> <h1>Old-Fashioned Fairy Tales</h1> <p>As the title </p> <p>Except for the use </p> <p>They have appeared </p> <p>First, </p> </div> <div id="content"> <h2>Contents</h2> <ul> <li>The Nix in Mischief</li> <li id="special">The Ogre Courting</li> <li>Murdoch’s Wrath</li> <li>The Little Darner</li> <li>The Magic Jar</li> </ul> </div> The style sheet: body { background-color: #F9FEB0; } div#content { width: 200px; position: absolute; top: 0; /* positioned in the top-left corner */ left: 0; background-color: #AFD479; padding: 10px; } li#special { position: absolute; top: 0; /* positioned in the top-right corner */ right: 0; background-color: fuchsia; } div#preface { margin-left: 225px; /* makes room for the contents box */ } Part III: CSS for Presentation 302 Absolute Positioning The li element is positioned in the top-right corner of the “contents” div. The positioned “contents” div becomes the containing block for the positioned li element and creates a new positioning context. Figure 15-14. Positioned elements become the containing block for the elements they contain. In this example, the list item is positioned relative to the containing div element, not the whole page. Specifying Position Now that you have a better feel for the containing block concept, let’s take some time to get better acquainted with the offset properties. So far, we’ve only seen an element moved a few pixels down and to the right, but that’s not all you can do, of course. Pixel measurements As mentioned previously, positive offset values push the positioned element box away from the specified edge and toward the center of the containing block. If there is no value provided for an edge, it is set to auto, and the browser adds enough space to make the layout work. In this example, I’ve used pixel length for all four offset properties to place the positioned element at a particular spot in its containing element (Figure 15-15). div#a { position: relative; /* creates the containing block */ height: 120px; width: 300px; border: 1px solid; background-color: #CCC; } div#b { position: absolute; top: 20px; right: 30px; bottom: 40px; left: 50px; border: 1px solid; background-color: teal; } Absolute Positioning Chapter 15, Floating and Positioning 303 div.a (width: 300px; height: 120px) left: 50px right: 30px div.b (calculated at 220 pixels wide x 60 pixels high) bottom: 40px top: 20px Figure 15-15. Setting offset values for all four sides of a positioned element. Notice that by setting offsets on all four sides, I have indirectly set the dimen- sions of the positioned div#b (it fills the 220 × 60 pixel space that is left over within the containing block after the offset values are applied). If I had also specified a width and other box properties for div#b, there is the potential for conflicts if the total of the values for the positioned box and its offsets do not match the available space within the containing block. The CSS specification provides a daunting set of rules for handling conflicts, but the upshot is that you should just be careful not to over-specify box properties and offsets. In general, a width (plus optional padding, border, and margin) and one or two offset properties are all that are necessary to achieve the layout you’re looking for. Let the browser take care of the remaining cal- culations. Percentage values You can also specify positions with percentage values. In the first example in Figure 15-16, the image is positioned half-way down the left edge of the containing block. In the second example on the right, the img element is positioned so that it always appears in the bottom right corner of the con- taining block. img#A { position: absolute; top: 50%; left: 0%; /* the % symbol could be omitted for a 0 value */ } img#B { position: absolute; bottom: 0%; /* the % symbol could be omitted for a 0 value */ right: 0%; /* the % symbol could be omitted for a 0 value */ } WA R N IN G Be careful when positioning elements at the bottom of the initial containing block (the html element). Although you may expect it to be positioned at the bottom of the whole page, browsers actually place the element in the bottom corner of the browser window. Results may be unpredictable. If you want something positioned in a bottom corner of your page, put it in a containing block element at the end of the document source, and go from there. WA R N IN G Be careful when positioning elements at the bottom of the initial containing block (the html element). Although you may expect it to be positioned at the bottom of the whole page, browsers actually place the element in the bottom corner of the browser window. Results may be unpredictable. If you want something positioned in a bottom corner of your page, put it in a containing block element at the end of the document source, and go from there. Part III: CSS for Presentation 304 Absolute Positioning top: 50% left: 0% bottom: 0%; right: 0% Figure 15-16. Using percentage values to position an element in the bottom corner of the containing block. In Exercise 15-2, we’ll have some more fun with the JenWARE home page, this time using absolute positioning. N o t e If you moved the Testimonials column to the left at the end of Exercise 15-1, you will also need to change the margin on the “products” div from the left to the right side for this exercise to work properly. N o t e If you moved the Testimonials column to the left at the end of Exercise 15-1, you will also need to change the margin on the “products” div from the left to the right side for this exercise to work properly. In this exercise, we’ll use absolute positioning to add an award graphic to the site and to create a two-column layout. Open the latest version of jenville.html (or jenville_2.html if you were using that version in the previous exercise) in a text editor to get started. Let’s pretend that JenWARE.com won the “Awesome Site of the Week” award, and now we have the option of displaying a little award banner on the home page. Because it is new content, we’ll need to add it to the markup. Because it is non-essential information, we’ll add the image in a new div at the very end of the document, after the copyright paragraph. <div id="award"><img src="images/awesomesite.gif" alt="awesome site of the week" /></div> 1. Just because it is at the end of the document source doesn’t mean it needs to display at the bottom of the page. We can use absolute positioning to place the “award“ div in the top, left corner of the browser window for all to see by adding a new rule to the style sheet that positions the div , like so: #award { position: absolute; top: 35px; left: 25px; } Save the document and take a look (Figure 15-17). Resize the browser window very narrow and you will see that the positioned award image overlaps the header content. Notice also that when you scroll the document, the image scrolls with the rest of the page. Try playing around with other offset properties and values to get a feel for positioning in the browser window (or the “initial containing block” to use the correct term). Figure 15-17. An absolutely positioned award graphic. exercise 15-2 | Absolute positioning Absolute Positioning Chapter 15, Floating and Positioning 305 The floated testimonials box is working just fine, but for fun, let’s see if we can do the same thing with absolute positioning. In this case, positioning within the initial containing block is not quite feasible because we want it to always appear under the intro div (regardless of its size) and to stay within the margins of the page, which are also flexible. What we need is a new positioning context under the intro, so let’s create a new containing block for the positioned testimonials box. This is going to require some changes to the markup. Wrap the testimonials and products divs in a new div with an id of content. The structure of the document should look like this: <div id="content"> <div id="testimonials"> </div> <div id="products"> </div> </div> <p class="copyright"> </p> Now we can turn the “content” div into a containing block simply by positioning it with the “unmoved-relative-position“ trick: #content { position: relative; } We know that according to the normal flow, the “content” div will always appear below the preceding block-level “intro” div element, regardless of its size. What we want to do is position the “testimonials” div in the top, right corner of the “content” div containing block, so we add these properties to the #testimonials rule (delete the float property from the previous exercise first). #testimonials { position: absolute; top: 0; right: 0; float: right; width: 150px; border: 1px dashed #F26521; padding: 1em; padding-left: 60px; background: #FFBC53 url(images/ex-circle-corner. gif) no-repeat left top; line-height: 1.2em; } 2. 3. 4. Save the document and look at it in the browser (Figure 15-18). It should look just the same as the float exercise, but you have the satisfaction of knowing you have experience of creating a column with absolute positioning. Extra credit: Try switching the position of the columns by positioning the testimonials box on the left. (Hint: you’ll need to change the margin setting on the “products” div , too). Reality Check Before you get too excited about the ease of creating multi- column layouts with absolute positioning, let me point out that this exercise represents a best-case scenario in which the positioned side-column is pretty much guaranteed to be shorter than the main content. There is also no significant footer to worry about. If the sidebar were to grow longer with more testimonials, it would overlap any full-width footer that might be on the page, which is not ideal. Consider this a heads-up that there’s more to the story, as we’ll see in Chapter 16. Figure 15-18. Two column format created by absolutely positioning the testimonials box.