CSS Layers

With CSS, it is possible to work with layers: pieces of HTML that are placed on top of the regular page with pixel precision.

The advantages of this are obvious

SO HERE IS THE CODE

LAYER 1 ON TOP:
 <div style="position:relative; 
                font-size:50px; 
                z-index:2;>LAYER 1</div>
<div style="position:relative; 
               bottom:60px; left:5px; color:red; 
               font-size:80px; z-index:1">LAYER 2</div>
			   
LAYER 2 ON TOP:
 <div style="position:relative; 
                font-size:50px; 
                z-index:3;>LAYER 1</div>
<div style="position:relative; 
               bottom:60px; left:5px; color:red; 
               font-size:80px; z-index:4">LAYER 2</div>

So in order to create layers, you need to assign a position attribute to your style. The position can be either absolute or relative.

The position itself is defined with the bottom and left properties.

And last of all. Which layer that goes on top is defined with the z-index attribute.

THE Z-INDEX

So let me explain the z-index a bit. Picture a new deck of 52 playing cards. If the ace of spades was right down at the bottom it would have a z-index:1;. And if the queen of hearts was positioned on the top of the deck it would have a z-index:52;.

Look at the code example above on this page again, look at how we used the z-index to put LAYER 1 on top in our first example, while we had LAYER 2 on top in our second example.

See it!!! Yep, That's right. The higher z-index number is placed on the higher layer.

When it comes to layering you could quite easily create several "pages" on top of each other - (all on the one web document). So when the user clicks on a link it simply moves the layer with the desired content onto the top rather than loading another document. This technique, to create these kind of effects go way beyond the scope of pure CSS. Really it's moving towards DHTML (Dynamic HTML - a mix between JavaScript and CSS).

VISIBILE VERSUS HIDDEN LAYERS

Now you have to ask your self? Why would any one want to create an invisible layer!!

Yep, one last property for layers is the visibility property that will allow you to create invisible layers. Imagine the possibilities it would give you for adding pop-up menus triggered by events and other cool effects on your pages.

The most common use of this is to create menus that pop out (just like the sub menus in the START menu on Windows). The trick behind these menus is to create all submenu's as invisible layers. Then, when a mouse-over is detected on a link the according layer becomes visible.

Valid values for the visibility property are: visible and hidden.