free hosting   image hosting   hosting reseller   online album   e-shop   famous people 
Free Website Templates
Free Installer

Image Layering
Using Z-Index


This script explains the principle of image layering, using the style sheet z-index attribute.

What is z-index?

Solid objects have 3 dimensions: height, width and depth.

Your computer screen's height is the x plane.

Its width is the y plane.

Therefore, its depth is the z plane.


To simulate depth in Javascript, the z-index is used.

The surface of the screen is the default level, or point of origin, and z-index=0.

One layer into the screen, and z-index=-1

Another layer deeper, and z-index=-2. And so on.

Therefore an object with z-index=-1 would appear to sit behind an object with z-index=0.


Likewise, one layer out of the screen, and z-index=1.

A further layer out, and z-index=2. And so on, again.


To create 3 overlapping images, use this code in the body section of your page:
And this is the result:







Notice that the first image is on the bottom layer, since it has the lowest z-index value: -2.

Similarly, the third image is on top, since it has the highest z-index, 0.


Positioning the Images

Normally, the 3 images above would look like this on the page:
But their positions can now be controlled with the following position parameters:
  • position - can be absolute or relative
  • top - the number of pixels from the top of its relative or absolute position
  • left - the number of pixels to the right of its absolute or relative position
    • The last parameter is a little confusing, but the position is based on the left-hand edge of the image.

    So it means the distance from that edge.


    Absolute makes the point of origin the top left-hand corner of the screen.
    Relative makes the point of origin the image's actual place on the page.


    For example: to place an image relative to the top left-hand corner of the screen:
    position:absolute
    To place the image relative to its actual position on the page:
    position:relative

    Example: place an image 150 pixels to the right of its actual position on the page:
    position:relative; top:0; left:150px
    And this is the result:



    In all examples on this page, relative positioning is used.


    Now let's manipulate the images, both by position and z-index values.

    Paste the code below into the head section of your page
    And this in the body of your page:

    How It Works

    This example uses:
  • relative positioning to stagger and move the images
  • z-index layering to overlap them, and bring the desired image to the top layer.

    • Since each image has the name pic, this creates a 3-element array.

    Each image also has preset position and z-index parameters.


    When the mouse passes over any of the 3 links, the function change() is called.

    This changes the position and z-index values of the image in question.


    Each link passes the following parameters :
  • which - the index of the image to be manipulated
  • idx - the desired z-index layer
  • pos - the position of the image

    • For example, if the mouse is over the first link, Image 1 is manipulated.

    When the parameters are passed to the function, this is the end result:
    pic[0].style.zIndex = 4
    pic[0].style.left = 190
    where:
  • pic[0] is Image 1
  • 4 is the image's z-index value
  • 190 is the number of pixels from the left of its actual place on the page.
    • Therefore Image 1:
  • moves 90 pixels to the right of its previous position (190 - the initial 100)
  • becomes the top layer

    • On mouseout with each link, the original layout is restored.


    Try It Out

    Place your mouse over each link and see what happens :
    Bring Image 1 To Top

    Bring Image 2 To Top

    Send Image 3 To Back








    © 2001 CyberSchool