Relativity Explained
Relative positioning means that an element is located in terms of another element. The relative location might mean an element is centered in the middle of the other element, or 35 pixels to its left, or 25 percent down from its top. The main point is that the first element’s position depends on the other element’s location. As you saw in Figure 4-3, a headline can be centered relative to the browser window.
Flow versus Positioning, Floating Versus Coordinates
CSS provides two important positioning tools: floating and positioning. Getting your mind around the various interactive features of these tools takes some time, but you’ll be glad that you invested that time. For one thing, you can often achieve a great goal that CSS makes possible: ridding your Web pages of tables used for layout.
Controlling Layout with Offsetting
In the previous examples in this chapter, you’ve used top and left properties to describe absolute locations. Now, take a further look at offsetting one element relative to another.
Top and left are specific locations in relation to an enclosing object. For example, if your element is not enclosed within another element, the top and left are specified in relation to the browser window (or “viewport”).
Moving Deeper into Positioning
In the preceding sample of code, the background color is described as cornflower blue. Obviously, this is a more readable, understandable, and memorable way of expressing this color than the bizarre RGB equivalent (#6495ED). Browsers other than IE 6 can have problems using descriptive words for colors. So if you’re worried about your page looking bad on other browsers, use #6495ED instead of cornflower blue. All browsers can translate #6495ED, even if we humans can’t.
Stacking Elements on Top of Each Other with the Z-Axis
Clearly, there’s more to positioning than mere horizontal (left) or vertical (top) coordinates. Indeed, there’s a third axis, known as the z-axis. In CSS, you specify which object is on top of another by using the z-index property. A higher z-index value causes an object to appear on top. For example, recall the experiment earlier when you had the main text class at 110 pixels left, but expanded the size of the sidebar class to 130 pixels? The main text covered up part of the sidebar. You can change this by adjusting the sidebar’s z-index to 99 or some number that you know is higher than the main text. This will move the sidebar div on top of the main text div.
Combining Stacking with Translucence
Now try a cool trick that combines stacking with opacity adjustments. It’s useful for all kinds of design effects and is particularly dramatic when used with scripting that animates the opacity or positioning of the elements dynamically. This kind of animation can be quite compelling when used correctly. This example adjusts the sample code you’ve been using throughout this chapter, but causes the sidebar element to show through the main text element.
Finally Comment
Imagine the nice fade-in effect that you can generate if you add some scripting to slowly adjust the opacity value while the user is watching. You’ve probably seen cool effects like fades on some of the better-designed Web sites. By the time you finish this book, you’ll know how to create animation with CSS and scripting.
