The combination of technologies you'll be working with in this tutorial will provide you with the basis for what you need to know about creating great CSS-based layouts, instead of the table-based ones discussed so often. Fortunately, contemporary browsers have enough CSS supportand we have enough knowledge of workaroundsto apply these techniques to create great-looking pages.
Positioning refers to the scheme in CSS that enables you to use elements to create boxes and move them around in relation to the document and browser. You'll learn what these schemes are and how to begin applying them.
Float refers to a CSS technique that places an element to the right or left. The text in the document can then flow around that element. This is likely to be most familiar to you in the context of images. You can float an image to the right, and the text will flow around the image. Add a little padding, and you've got a great look.
The use of floating has expanded to include floating div elements, allowing for the use of floated boxes for navigation or, even more adventuresome, the creation of multiple columns that can be used with or without positioning in the design of various layouts.
A z-index serves as a means to place element boxes along the z-axis. So far, I've discussed only the x- and y-axes, with x being horizontal and y being vertical. The z-axis provides the third dimension.
Think of it this way: Hold up a deck of cards in front of you. The order in which the cards appear from the closest one to you to the farthest one away is a good way to think of the z-index. Using it, you can literally stack items on top of one another and offset them. This is somewhat useful in layouts and to create effects, but the use of the z-index usually comes into play when combined with JavaScript. It's an interesting aspect of CSS, so you'll get to play with it a bit here, too. Okay, thenon with the show!
