Layers
YOUR GRADED ASSIGNMENT
Make a new image gallery page
using your 10 previous images (5 lg +5 sm)
and arrange the thumbnails in individual layers in a cool pattern.

SAVE














The Code for the above overlapping 2 layers:

<div id="layer1" style="position:absolute; width:100px; height:100px; left: 200px; top: 150px; z-index:1; ">
<a href="einstein.jpg" target="new"><img src="einstein_sm.jpg" border="0"></a>
</div>

<div id="layer2" style="position:absolute; width:100px; height:100px; left: 250px; top: 200px; z-index:2; ">
<a href="farnsworth.jpg" target="new"><img src="farnsworth_sm.jpg" border="0"></a>
</div>

A layer is like a page within a page that can be positioned EXACTLY
where you want it!
Finally, more than just left, right and center!
The position and area of each layer are given in pixels (screen dots).
A 300 x 200 layer positioned 50 pixels over and 60 pixels down
from the upper left corner of a page would be coded

<div id="layer1" style="position:absolute; width:300px; height:200px; left: 50px; top: 60px;">
words, images and links sandwiched here
</div>


You can overlap layers in a particular order using the z-index:1; option.
The greater the z-index number the higher in the "pile" the layer will appear.