CSS Z-Index Issue Firefox

When attempting to do layers with div tags you will want to use the z-index tag. The problem with this is you cannot forget to add the position: fixed,absolute,static,relative tag. The reason for this is that there is no way for the browser to identify what object is to be layered and in what order. Failing to do this will mean that in Firefox, IE and Safari you will not get the desired outcome.

Using the position tag will enable this to happen. It will help clarify the order. the lower the number the further back on the page it will go. Z-Index allows you to give your site a 3D point of view for laying content out. I have attached an example of what your code should look like.

#layer1 {

height:100px;

position:absolute;

width:100px;

z-index:1;

}

#layer2 {

height:100px;

position:absolute;

width:100px;

z-index:2;

}

It may take a few goes to get this right but once you have done it you will probably find yourself using this command time and time again.

Happy Z-Indexing!