Need help with layers

[davidsnave]

I haven't used layers much and I'm having problems getting a film strip image slide show to work. I want to use layers for this because I like the effect.

The problem is I'm using relative positioning and the layers are not stacked on top of each other like I want. They are positioned underneath each other. If I use absolute positioning then it's only right on one screen resolution and I don't want to use Javascript to correct that. I would rather use relative positioning.

Here is the page:
http://www.southgashelving.com/bedroom.php

If you click on the first few thumbnails at the bottom you will see what I mean. Of course I want the enlarged images to all show in the same area.

Here is the layer code which is located inside a table cell:
<div id="LyrAnchor">
<div id="LyrPic1" style="position:relative; left:10px; top:10px; width:250px; height:251px; z-index:1; visibility: visible;"><img src="images/250x250/bedroom17.jpg" width="250" height="251" /></div>
<div id="LyrPic2" style="position:relative; left:10px; top:10px; width:250px; height:250px; z-index:2; visibility: hidden;"><img src="images/250x250/bedroom13.jpg" width="250" height="250" /></div>
<div id="LyrPic3" style="position:relative; left:10px; top:10px; width:250px; height:250px; z-index:4; visibility: hidden;"><img src="images/250x250/bedroom18.jpg" width="250" height="250" /></div>
<div id="LyrPic4" style="position:relative; left:10px; top:10px; width:250px; height:250px; z-index:3; visibility: hidden;"><img src="images/250x250/bedroom23.jpg" width="250" height="250" /></div>
<div id="LyrPic5" style="position:relative; left:10px; top:10px; width:250px; height:250px; z-index:5; visibility: hidden;"><img src="images/250x250/bedroom21.jpg" width="250" height="250" /></div>
</div>

Please Help !!

I have no idea what I'm doing.

thanks