HTML and CSS Tutorials - Positioning, Floats, and Z-index
If you've been having a good time adding color, backgrounds, text styles, and margins to your pages, the fun has just begun. You'll be expanding your knowledge to include the most significant aspects of CSS to be put to use in the past few years.
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.
Table of content (tutorial index)