Relative Positioning


As shown in the last example in the previous section, you can use relative positioning simply to create a containing block for some other absolutely positioned element. However, the typical use of relative positioning is to position elements away from their normal position without influencing the position of other elements. There aren't many reasons for doing that in a style sheet, and the main reason relative positioning exists at all is to provide a way for scripts to animate the text to make it "explode" when a page is unloaded or make it slowly move into place when the page is loaded. These effects are well known in slide-show presentations, and with relative positioning and a clever script, you can do the same with HTML.

Unfortunately, scripting languages aren't good at animation. The way they do it is to enter a loop in which the value of the positioning properties slowly increases or decreases until they reach some preset value. With every change, part of the screen is redrawn. However, even on the fastest computers, the speed at which successive cycles of the loop are executed varies slightly, which causes a jerky motion enough for the human eye to notice. Real animation programs don't rely on such loops, but calculate the path of the element in advance, and even create blurry images on purpose, based on the measured speed of the computer, to fool the human eye into believing the object is moving more than it actually is.

SMIL is an XML-based language specifically for multimedia, including animations. It is a W3C standard, like HTML and CSS. A better option for animations may thus be to create them in SMIL and link them to an HTML file the same way you include an image in HTML. However, the style sheet has no influence over the animation then.


For this reason, some of the most common animation effects may one day end up in CSS itself to allow browsers to use the sophisticated animation algorithms and to help designers, who don't have to write scripts anymore. But until that time, scripting and relative positioning will have to do.

By itself, relative positioning isn't difficult to use or to understand. You can think of a relatively positioned element as a normal element that is pushed away from its proper position after the page has been laid out. You use top to specify how far down the element goes from its normal top edge and left to give the distance to move it to the right of its left edge. Negative values move it up and left, respectively. (You can also use right or bottom; they work exactly the same, but with the direction reversed.)

Figure 9.4 shows an example. The word "high" has been moved up by 0.5em (top: -0.5em). Note that this causes the word to overlap with the line above. The vertical-align property can also raise text, but it would have caused the lines to be pushed apart to avoid overlap.

Figure 9.4. The word "high" has been raised 0.5em by means of the top property.


You can use percentages as the values of left or right, and they will be relative to the width of the element (if it is a block) or the width of the enclosing block-level element. Percentages on the top or bottom properties are only possible if the element (or the enclosing block, for inline elements) has a set height (i.e., the height is not auto). Otherwise, a percentage will be interpreted as 0.



Cascading Style Sheets(c) Designing for the Web
Cascading Style Sheets: Designing for the Web (3rd Edition)
ISBN: 0321193121
EAN: 2147483647
Year: 2003
Pages: 215

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