@pjumble is correct in mentioning the importance of changing the z-index. The issue you are encountering is likely due to the priority of CSS selectors.
When creating a CSS format, selectors can be written in three basic ways and combined for more advanced selector definitions. Here are the three basic methods:
1.
Classes look like this:
.class1
{
color:blue;
font-size: 24px;
background-color:red;
}
This has the lowest priority.
2.
IDs look like this:
#id1
{
color:yellow;
font-size: 12px;
}
This has medium priority.
3.
Tags look like this:
Div
{
color:green;
}
This has the highest priority, which may seem counterintuitive. Despite defining an ID-level format, tag-specific styles take precedence.
For example:
If you have an element like this:
<Div id="id1" class="class1">
Text
</div>
The "Text" will have a red background because "class1" specifies a background color. For font size, the ID definition prevails over the class, making "Text" 12px. Finally, the "color" property will be green as defined by the tag name.
In your case,
#lightbox sets z-index to 100, while .gallerylayer assigns a z-index of 1000
Your idea is correct, but remember that a class definition of z-index may be ignored if the tag or ID also defines it. To avoid conflicts, consider assigning a unique ID to the tag with class='gallerylayer' to set the z-index rule effectively.
Ensure your definitions are not ignored by using Firefox with the Firebug add-on to inspect applied styles on your page. For further information on selectors, refer to resources like W3Schools.
I hope this clarifies things for you.