ptg CSS Positioning If using float to control how elements are laid out doesn’t provide the measure of con- trol you’re looking for, you can use the CSS positioning attributes. To position elements yourself, you first have to choose a positioning scheme with the position property. There are four positioning schemes, three of which you’ll actually use. The four are sta- tic, relative, absolute, and fixed. The static scheme is the default. Elements flow down the page from left to right and top to bottom, unless you use the float property to change things up. The relative scheme positions the element relative to the element that precedes it. You can alter the page flow to a certain degree, but the elements will still be interdependent. The absolute and fixed schemes enable you to position elements in any location you want on the page. The fixed scheme is not well supported, so if you want to control where items appear yourself you should use absolute. After you’ve picked a positioning scheme, you can set the position for elements. There are four positioning properties: top, left, bottom, and right. The values for these prop- erties are specified as the distance of the named side from the side of the enclosing block. Here’s an example: .thing { position: relative; left: 50px; top: 50px; } In this case, elements in the thing class will be shifted 50 pixels down and 50 pixels to the left from the elements that precede them in the page layout. If I were to change position to absolute, the element would appear 50 pixels from the top-left corner of the page’s body. 196 LESSON 8: Using CSS to Style a Site Output . FIGURE 8.16 Two floating ele- ments that are aligned vertically. Download from www.wowebook.com ptg Generally, when you’re positioning elements, you pick a corner and specify where the element should be located. In other words, there’s never a need to set more than two of the four positioning properties. If you set more than two, you could run into problems with how the browser renders the page because you’re specifying not only where the ele- ment should be located but also the size of the element. It’s much safer to use the sizing properties to size your elements and then specify the position of one corner of your ele- ment if you want to indicate where it should go on the page. Relative Positioning Let’s look at a page that uses relative positioning. This page illustrates both how relative positioning works and some of the problems with it. A screenshot of the page listed in the following code appears in Figure 8.17. Input ▼ <!DOCTYPE html> <html> <head> <title>CSS Example</title> <style type=“text/css”> .offset { border: 3px solid blue; padding: 10px; margin: 10px; background-color: gray; position: relative; top: -46px; left: 50px; width: 33%; } </style> </head> <body> <p> The absence of romance in my history will, I fear, detract somewhat from its interest; but if it be judged useful by those inquirers who desire an exact knowledge of the past as an aid to the interpretation of the future, which in the course of human things must resemble if it does not reflect it, I shall be content. </p> <p class=“offset”> The absence of romance in my history will, I fear, detract somewhat from its interest; but if it be judged useful by those inquirers who desire an exact knowledge of the past as an aid to the interpretation of the future, which in the course of human things must resemble if it does not reflect it, I shall be content. In fine, I have written my work, not as an essay which is to win the applause of the moment, CSS Positioning 197 8 Download from www.wowebook.com ptg but as a possession for all time. </p> </body> < /html> 198 LESSON 8: Using CSS to Style a Site Output . FIGURE 8.17 A page that uses relative positioning for an element. You can spot the problem right away on this page—the relatively positioned element overlaps the paragraph above it. I used a negative value for the top property to move the element up 50 pixels, and also moved it to the left 50 pixels. The hole where the content would normally be positioned if I were using static positioning remains exactly the same as it would had I not moved the element, thus creating whitespace before the third para- graph. However, due to the positioning, the paragraph has been moved up so that it over- laps the one above it. By default, the backgrounds of elements on an HTML page are transparent. I added a background color to the relatively positioned box to more clearly illustrate how my page works. If I remove the background-color property from class two, the page looks like the one in Figure 8.18. In this example, transparency is probably not the effect I’m looking for. However, taking advantage of this transparency can be a useful effect when you create text blocks that partially overlap images or other nontext boxes. Download from www.wowebook.com ptg Absolute Positioning Now let’s look at absolute positioning. The source code for the page shown in Figure 8.19 contains four absolutely positioned elements. Input ▼ <!DOCTYPE html> <html> <head> <title>Absolute Positioning</title> <style type=“text/css”> #topleft { position: absolute; top: 0px; left: 0px; } #topright { position: absolute; top: 0px; right: 0px; } #bottomleft { position: absolute; bottom: 0px; left: 0px; } CSS Positioning 199 8 FIGURE 8.18 Transparency of overlapping elements. Download from www.wowebook.com ptg #bottomright { position: absolute; bottom: 0px; right: 0px; } .box { border: 3px solid red; background-color: #blue; padding: 10px; margin: 10px; } </style> </head> <body> <div class=“box” id=“topleft”> Top left corner. </div> <div class=“box” id=“topright”> Top right corner. </div> <div class=“box” id=“bottomleft”> Bottom left corner. </div> <div class=“box” id=“bottomright”> Bottom right corner. </div> <p> The absence of romance in my history will, I fear, detract somewhat from its interest; but if it be judged useful by those inquirers who desire an exact knowledge of the past as an aid to the interpretation of the future, which in the course of human things must resemble if it does not reflect it, I shall be content. </p> <p> The absence of romance in my history will, I fear, detract somewhat from its interest; but if it be judged useful by those inquirers who desire an exact knowledge of the past as an aid to the interpretation of the future, which in the course of human things must resemble if it does not reflect it, I shall be content. In fine, I have written my work, not as an essay which is to win the applause of the moment, but as a possession for all time. </p> </body> </html> 200 LESSON 8: Using CSS to Style a Site Download from www.wowebook.com ptg Aside from the fact that there are now four absolutely positioned <div>s on the page exactly where I indicated they should be placed, a couple of other things should stand out here. The first item to notice is that when you absolutely position elements, there’s no placeholder for them in the normal flow of the page. My four <div>s are defined at the top, and yet the first paragraph of the text starts at the beginning of the page body. Unlike relative positioning, absolute positioning completely removes an element from the regular page layout. The second interesting fact is that absolutely positioned elements overlap the existing content without any regard for it. If I want the text in the paragraphs to flow around the positioned elements, I have to use float rather than position. Not only can I use any unit of measurement when positioning elements, I can also use negative numbers if I choose. You already saw how I applied a negative value to the top of the relatively positioned element to move it up some; I can do the same thing with these absolutely positioned elements. The result of changing the rule for the topleft class in the earlier example to Input ▼ #topleft { position: absolute; top: -30px; left: -30px; } is that it actually pulls the element partially off of the page, where it is inaccessible even using the scrollbars, as shown in Figure 8.20. CSS Positioning 201 8 Output . FIGURE 8.19 A page that uses absolute positioning. Download from www.wowebook.com ptg Output . FIGURE 8.20 Use of negative absolute positioning. 202 LESSON 8: Using CSS to Style a Site Controlling Stacking CSS provides a way of taking control over how overlapping elements are presented. The z-index property defines stacking order for a page. By default, elements that appear in the same layer of a document are stacked in source order. In other words, an element that appears after another in the HTML source for the page will generally be stacked above it. By assigning z-index values to elements, however, you can put elements in specific stacking layers. If all elements appear in stacking layer 0 by default, any element in stacking layer 1 (z-index: 1) will appear above all elements in layer 0. The catch here is that z-index can be applied only to elements that are placed using absolute or relative positioning. Elements that are placed using static positioning always appear below rela- tively or absolutely positioned elements. The stacking layers below 0 are considered beneath the body element, and so they don’t show up at all. If you want to have an element positioned as though it were part of the static positioning scheme but you want to control its stack- ing layer, assign it the relative positioning scheme and don’t spec- ify a position. It will appear on the page normally but you will be able to apply a z-index to it. Let’s look at another page. This one contains two paragraphs, both part of the same (default) stacking layer. As you can see in Figure 8.21, the second overlaps the first. TIP Download from www.wowebook.com ptg Input ▼ <!DOCTYPE html> <html> <head> <title>Stacking Example</title> <style type=“text/css”> .one { position: relative; width: 50%; padding: 15px; background-color: yellow; } .two { position: absolute; top: 15%; left: 15%; padding: 15px; width: 50%; background-color: navy; color: white; } </style> </head> <body> <p class=“one”> The absence of romance in my history will, I fear, detract somewhat from its interest; but if it be judged useful by those inquirers who desire an exact knowledge of the past as an aid to the interpretation of the future, which in the course of human things must resemble if it does not reflect it, I shall be content. </p> <p class=“two”> The absence of romance in my history will, I fear, detract somewhat from its interest; but if it be judged useful by those inquirers who desire an exact knowledge of the past as an aid to the interpretation of the future, which in the course of human things must resemble if it does not reflect it, I shall be content. In fine, I have written my work, not as an essay which is to win the applause of the moment, but as a possession for all time. </p> </body> </html> CSS Positioning 203 8 Download from www.wowebook.com ptg Output . FIGURE 8.21 Two normally stacked elements. 204 LESSON 8: Using CSS to Style a Site So, how do I cause the first element to overlap the second? Because I’ve assigned the first element the relative positioning scheme (even though I haven’t positioned it), I can assign it a z-index of 1 (or higher) to move it into a stacking layer above the second paragraph. The new style sheet for the page, which appears in Figure 8.22, is as follows: Input ▼ .one { position: relative; z-index: 1; width: 50%; padding: 15px; background-color: #ffc; } .two { position: absolute; top: 15%; left: 15%; padding: 15px; width: 50%; background-color: #060; color: #fff; } Download from www.wowebook.com ptg Output . FIGURE 8.22 A page that uses z-index to con- trol positioning. The <body> Tag 205 8 Using a combination of absolute and relative positioning, you can create very complex pages with many stacked layers. The <body> Tag I’ve already mentioned that you can adjust the margin, padding, and border of a page by applying styles to the <body> tag. More important, any styles that you want to apply on a pagewide basis can be assigned to the page’s body. You already know about setting the background color for the page by using style=“background-color: black” in your <body> tag. That’s really just the beginning. If you want the default font for all the text on your page to appear in the Georgia font, you can use the following style: body { font-family: Georgia; } That’s a lot easier than changing the font-family property for every tag that contains text on your page. A common <body> tag you often see looks something like this: <body bgcolor=“#000000” text=“#ffffff” alink=“blue” vlink=“yellow” alink=“ purple”> You can modify the background and text colors like this: body { color: white; background-color: black; } Download from www.wowebook.com . { position: relative; z-index: 1; width: 50%; padding: 15 px; background-color: #ffc; } .two { position: absolute; top: 15 %; left: 15 %; padding: 15 px; width: 50%; background-color: #060; color:. 8 .17 . Input ▼ <!DOCTYPE html& gt; < ;html& gt; <head> <title> ;CSS Example</title> <style type=“text /css > .offset { border: 3px solid blue; padding: 10 px; margin: 10 px; background-color:. moment, CSS Positioning 19 7 8 Download from www.wowebook.com ptg but as a possession for all time. </p> </body> < /html& gt; 19 8 LESSON 8: Using CSS to Style a Site Output . FIGURE 8 .17 A