Nimrod,
I am going to do my best to explain this to you. If you still have trouble, e-mail me at
sschling@kaneland.org.
If you have taken a math class that deals with "3-space", which is actually how dimensions the real world we live in is made of, the teacher should of talked about the x and y axis but with a twist: the z axis thrown in. This allowed you to get depth and 3-dimensional objects. i.e. cones, cylinders, spheres, etc.
Enough with the math lesson (I am an old math teacher
)!
When you use the z-index attribute within a css, the image is placed a distance from your starting canvas. Sounds confusing, let me use an example.
If you have two objects, trying to keep with your question, two images. If I start with a cork board and I want to tack the images to the board, but the board is too small, they will have to overlap. The image that is "in front" of the other is said to have a greater z-index, since it is further off the cork board.
The image on the cork board would have a z-index of 4, while the image in front of it would have a z-index greater than 4, so 5 would work. So would 6, 10, 100, just as long as it is greater than the z-index of the bottom picture.
Try this little code in a document and you can see what happens:
<html>
<head>
<title>Testing the z-index in Style Sheets</title>
<style type=text/css>
<!--
h2 { color=#ff0000; position: relative; left: 5px; top: 0px; z-index: 1}
h1 {color=#00ff00; position: relative; left: 20px; top: -40px; z-index: -2 }
-->
</style>
</head>
<body>
<h2>This should be on top</h2>
<h1>This should be behind the header of size 2</h1>
</body>
</html>
I hope this helps!
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
CSS: 2 overlapping background images
Linear Mode
