CSS Positioning

Above is an example of relative positioning and below it, the code that made it all happen. In the normal flow of things, one picture would have been below the other. As you can see, all I did was put one picture on top of the other by moving it left 100 pixels and then from the top -75 pixels which moved it up instead of down. You can move it clear off the page with negative numbers if you want.

The page here is of various fixed sizes so it's not a good one to show relative positioning. Click here to see the same example but in a page you can change the size of and see the content move.

Now that's all fine and good but what do you do if the picture you want on top is on the bottom? That's where the z-index comes in handy.

A computer monitor has an X (horizontal) axis and a Y (vertical) axis. The Z axis is what give us the illusion of depth or the third dimension. The z-index is also called the "stacking order" because it's just like stacking one thing on top of the other obscuring the view of whatever is below it. Normally the browser sets the stacking order of elements on the page. Usually in the order that they appear in the code, but we can change this.

Since the z-index is positioning you must first declare a type of positioning such as relative. Then you can set the z-index in whole numbers only. You know, numbers such as 0,1,2,3,etc.. Negative numbers are also allowed but some browsers may have trouble with them. Below is an example of what this code might look like:

For reference, below is the way things stack up when I let the browser do it:

 

 

And below is an example of what you can do by changing the natural flow of things with z-index. Only the number 2 has it's z-index changed:

 

 

And here's one more example with all three numbers changed. Most of my test browsers worked fine with only changing two, but one had a problem with negative numbers so I set all three with positive numbers to cure the problem:

 

 

As you can see, positioning will take you some practice to get used to. Try starting off with a simple page, moving just a few things around. When you can do that, position a few more things on the page. Eventually you can work up to placing everything on the page where you want it. Just remember, building boxes for content using the <div></div> will make it a lot easier especially since some browsers will not let you move certain types of elements by themselves. So putting them in a box and moving the box is the only way to move them.

Positioning can be one of the most challenging parts of cascading style sheets but well worth the effort when you see what you can do with it that can't be done with HTML. Good luck with it.