CSS Positioning: An Overview

We will first examine the float property. The float property lets us do stuff like this — "float" boxes to the left or right of other boxes, out of the normal left-right, top-bottom flow.

"A browser 'wants' to display everything from left to right and from top to bottom." Recognize that little gem? If you took the HTML class with me, you may remember that that is the first sentence of the first page. It's the very first bit of instruction I offered in that class, and we're right back there. Only now we're going to call it "flow." When we use CSS to "position" boxes, we are moving things around relative to this normal flow.

You already know how to center stuff. We covered the {text-align} property back on Page #64. And you had a sneak preview of positioning when you learned how to center boxes like this one back on Page #37.

The third item on the agenda is the position property. It does just what it's name says it does. It does just what it's name says it does. It does just what it's name says it does. It does just what it's name says it does. It does just what it's name says it does. It does just what it's name says it does. It does just what it's name says it does. (I'm not stuttering; I just want to make room for that blue box over there on the left.)

The position property makes it possible to do stuff like this — move boxes around and maybe encroach on the territory normally reserved for another box.

Finally we'll explore the z-index property. The z-index property makes it possible to stack boxes, like that cute little group just below.

Box 1 Box 2 Box 3 Box 4

I kinda like Box 2 hanging over the border — another "escapee." But there is a way to move the bottom border down. Look at the CSS code for this page. In the code for #content, you will see one property that I have "commented out." Remove the comment, and the bottom border will move down far enough to reclaim the box.