Can anyone enlighten me about how to ensure a LightBox doesn’t appear beneath another page element. I want my light box to be on top of everything else on the page. Right now it’s beneath the header (which uses a sticky stack to keep it at the top of the page).
Foundation 6 with Foundation 6 Lightbox. There don’t seem to be controls for ‘z’ value. Screen grab attached.
The NEWS section is the LightBox.
Do you have a URL we can look at?
The sticky stack will have a high z-index as it is meant to go over the top of everything else.
However, the F6 swatch add-on pack has a z-index swatch to change the index.
Or, the easy fix is to move the Lightbox towards the centre of the browser Windows so it isn’t under the Lightbox?
Edit:In fact I think Lightbox has a higher z-index than the sticky stack so it should go over everything. A URL will help us to see what is happening here.
By default, Sticky has a z-index of 99 and L:ightbox a z-index of 1005 so maybe you have alter the defaults?
Here’s a URL: LifeForce Light Therapy
You also suggested an easy fix was to move the lightbox towards the centre o of the browser window. Best way to do that? Using a spacer to push the lightbox down the page? Or some other better but still easy way to achieve that?
I don’t yet own the F6 swatch add-on pack but it looks like another good tool.
Lightbox automatically appears from the centre of the screen. Maybe you are trying to put too much in the Lightbox? Is that Lightbox the News heading and the 4 news blocks underneath?
I’ll take a look at your URL.
One Lightbox is the NEWS heading and 4 news blocks below. A second Lightbox is the REVIEWS headng and 10 review blocks below. (too much?)
I bought and installed the F6 Swatch Pack. Now I just have to figure out where they are in my library LOL
Are they grouped together somehow? Have their own icon/colour?
Maybe you have fixed it? The menu is now under the Lightbox rather than being over it…
Ah, not when you scroll the page though.
OK, here is your problem. The menu has a z-index of 9999 which makes it go over everything.
I can’t see a z-index for the Lightbox, but if I play with the two and set the menu to a z-index of 1200
And the Lightbox to 1300 then the menu still appears over the page but the Lightbox appears over the menu.
.stacks_in_etc is the menu,
.reveal-overlay is the Lightbox
Gary; would you be using the z-index swatch from the Swatch Pack to set those values? Or is there some other magic at work?
Was it a trial & error process to arrive at 1200 for the sticky banner and 1300 for the light?
I was using the Safari developer panel to play with the z index values. I just reduced the menu from 9999 until the menu disappeared under the page, then added 100. Then I added 100 more to the lightbox z value.
You now need to figure out if you somehow set those values when you created the page and if you can change them - or use the z index swatch on those classes.
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.
