Do everything with javascript

Monthly Archives: January, 2009

Working with z-index

What is z-index

When we talk about 3D, we have the x,y,z dimension. z-index is the third dimension on a web page which determine how element stack. It works like Photoshop’s layer. In general, larger z-index stack on top of smaller z-index. But there still other factors that will affect the layer stacking, which are the position property in CSS and the html structure.

How z-index works

It is often to find that z-index doesn’t work as expected. Sometimes it work on Firefox but failed in IE 6. The first thing to make z-index work is you need to position that element. You can set the position property to absolute, fixed, or relative (but not static). Below is series of samples to test on how z-index stacking works.