z-index - purpose?

[Guest]

Hi!

I am creating a webpage using layers. Can anyone tell me the purpose of the
z-index number.

 

[Jon Spivey]

Hi,
Z-index controls the stacking order of layers - the higher the number the
nearer the top the layer appears. For example
Compare
<div
style="position:absolute;left:10px;top:10px;width:100px;height:100px;color:red;z-index:1"></div>
<div
style="position:absolute;left:20px;top:20px;width:100px;height:100px;color:blue;z-index:2"></div>
With
<div
style="position:absolute;left:10px;top:10px;width:100px;height:100px;color:red;z-index:2"></div>
<div
style="position:absolute;left:20px;top:20px;width:100px;height:100px;color:blue;z-index:1"></div>

 

[Murray]

It specifies the height *above* the page (in the z axis). If you consider
that the page has an x and y axis for its width and height, respectively,
then the z axis would be the perpendicular line coming out of the page
towards your eyes. This allows you to superimpose elements within
absolutely positioned containers in interesting ways. It also allows people
who have just discovered the existence of absolute positioning and z-index
to get themselves into a world of trouble. This is especially true when one
is "creating a webpage using layers" which is usually just a very bad idea.

To read about layers and their improper uses, go here -

http://www.great-web-sights.com/g_layerlaws.asp

 

[Guest]

I see, thanks. Very useful!