i'm trying to construct an image gallery using modified code (below) from the dd css library, and i want to position the hover image so that it appears in a specified place, but a fluid page.

can i do this using z-index, and if so does a dive with a z-index rule of, say, 50, parent everything in behind layers (1-49) or in front layers (51+)...or neither because it depends on when/where it is called in the HTML?

and what would the position statement be? i've already tried positioning it relative, but that messes with the thumbnail layout.

Code:
/* CSS Document */
<!-- Source: Dynamic Drive CSS Library -->
<!-- URL: http://www.dynamicdrive.com/style/ -->
.gallerycontainer{
position: relative;
height: 60px;
padding: 0px 4px 0px 8px;
text-align: justify;
z-index: 100;
width: 732px;
margin-left: -1px;

}
 
.thumbnail img{
border: 1px solid #ffffff;
margin: 1px 1px 2px 1px;
}
 
.thumbnail:hover{
background-color: transparent;
}
 
.thumbnail:hover img{
border: 1px solid #ffffff;
}
 
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
height: auto;
width: auto;
background-color: #f7f8f9;
padding: 0px;
/*b1b7cf f7f8f9 000333*/
border: 1px solid #b1b7cf;
visibility: hidden;
color: #000333;
text-decoration: none;
padding: 3px 3px 3px 3px;
}
 
/*.thumbnail span p{
color: #ffffff;
text-decoration: none;
margin-bottom: 12px;
}*/

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0px;
margin-bottom: 3px;
}
 
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
top: auto;
left: auto; /*position where enlarged image should offset horizontally */
z-index: 50;
}
thanks for any advice! :-)