There is a lot of power in this lesson. Learn it well...

First off, there are two ways you can position your elements with the position keyword. Relative and absolute. Relative incorporates the text into the flow of your html, and THEN pushes it around as you tell it to. Absolute, however, removes it from the flow of your HTML and puts it where you tell it to with respect to the WINDOW. Click here to see an absolutely positioned element.

OK, now that you know how to set something's position, you can move it around. You do that with the left and top keywords. They accept any measurements, but px is usually best to use in my opinion. With the relative keyword used, they move it however many units from the top left corner of where it would normally begin. X units from the top (with the top keyword) and x units from the left (with the left keyword). Absolute positioning does the same thing with respect to the top left corner of the window itself.

The following text has position:relative;top:10px;left:10px applied to it: This text is 10px down from the top corner and 10px to the right from the left corner of where it would normally begin.And this text returns to the normal flow. Notice how it overlaps.

The text under the positioned text is text that followed the positioned text. It begins where the positioned text would have ended. Ain't it cool? This is where the z-index keyword comes in. When you have overlapping text, you can set which is on top of the other using the z-index keyword. It takes any number, and the largest number of overlapping text is on top, with each smaller z-index falling under the bigger z-index. However, the text must be positioned in order for z-index to work. Z-index works like this:
Non z-indexed:
Bottom
Middle
Top 		z-indexed:
top
Middle
bottom

Normally (in the non z-indexed cell), the browser puts the first positioned element on the bottom, and puts each one on top of the previous one (assuming they even collide), but with z-indexing, you can undo that like in the second cell. Just highlight each cell and notice how the top one's highlight is over the middle one's highlight, the middle one's highlight is below the top one's and above the bottom one's, and the bottom one's is below the middle one's.

Now onto some more complex stuff. With the width keyword, you can control how wide of an area that a positioned element takes up. Remember that absolutely positioned text above? It has a width setting of 30px. That's why the text wraps. It only works on absolutely positioned elements, though. The height keyword works the same way. It defines the maximum height of a box.

But what if the text you put into the absolutely positioned box takes up more space than you provided? Well, you can tell it what to do with the overflow keyword. It takes four values. Visible will display it even if it goes outside the boundaries, like so (scroll to the top of the page after clicking the link): Click here to see a "visible" overflow.(Doesn't do what it should do in IE)

A value of hidden will just make the stuff outside the box invisible - no example needed there. A value of auto will hide the stuff outside of the box, but it will also add scrollbars so you can see it. Finally, scroll puts in a scrollbar no matter what. Click here to see an "auto" overflow - scroll up to see it!

Next we have visibility. It takes three values: hidden, visibile, inherit. The text still takes up the same amount of space whether it's visible or not. If it's hidden, though, you won't see it - it'll just be empty space. You've already seen the visible and hidden traits in action - all of those boxes that appear are actually hidden there when the page loads. Since they're positioned absolutely, though, they don't interrupt the flow of the document. Obviously, all elements default to "visible". Oh, and this does work with relatively positioned elements. When a relatively positioned element is invisible, everything under it is seen as if the thing on top of it wasn't there. And no, you can't make stuff appear and disappear like those boxes did with CSS alone - it's a whole 'nother skill that'll be taught in a whole 'nother tutorial.

Lastly, we can use the clip keyword to set up a visibile rectangle in an element that has been absolutely positioned. Everything outside of that rectangle that is part of the absolutely positioned element will be invisible. It takes the value clip(value1 value2 value3 value4). This is a needlessly complicated method of input, but here's how it works. Value1 is the number of units that the top of the box is from the top of the element. Value2 is the number of units that the right of the box is from the left of the element. Value3 is the number of units that the bottom of the box is from the top of the element. Lastly, value4 is the number of units that the left of the box is from the left of the element. Don't get it? Just study what I just said. Click here to see a clipped box and the same box without a clip - sroll up to see it!

The first box is exactly the same as the second one, except it has clip:rect(2px 50px 90px 4px) set. The first and last values essentially set the top right corner of the box, and the center two values set the bottom right corner.

And that's everything! I hope I offered good explanations of how all this stuff works - it's pretty complicated.