CSS & Javascript problem

[Susie56]

I have a work in progress website for a Pre-School and am having difficulties adding the gallery photo's. When you click on thumbnail they open up to the larger image UNDER navigation bar, yet the navigation bar is in the top section and the photo's are in the main content section. I would be most grateful if anyone can solve this mystery for me? Just need it to open above everything.
The link is: http://www.fowey-preschool.co.uk/gallery.html

Thank you for your time. Susie :(:)

[jscheuer1]

Using a text only editor like NotePad, in the engine/css/visuallightbox.css file change the highlighted as shown:


#overlay{
position: absolute;
top: 0;
left: 0;
z-index: 1000;
width: 100%;
height: auto;
background-color: #FFF;
}

#lightbox{
position: absolute;
top: 20px;
left: 0;
width: 100%;
z-index: 1001;
text-align: center;
color:#151410;
line-height:0;
}

The browser cache may need to be cleared and/or the page refreshed to see changes.

[Susie56]

Thank you so very much, I thought it would be something simple.
Although I don't understand the z-index section.

Thank you again John, :o:)

[jscheuer1]

Well, when you have relative, absolute, or fixed position as both the menu and the lightbox do, you have three other things you can set:

left or right - the x-axis, how from the left or right it will be
top or bottom - the y-axis, how far from the top or bottom it will be
z-index - the z-axis, the stacking index for when two items are in the same general or overlapping x and y axis locations.

The higher z-index will cover the lower one. The menu has 999, so I figured 1000 for the overly and 1001 for the lightbox.