I'm working on a project that requires a lightbox style pop-up. If you click the large green number on the preview site, you'll see the pop-up I'm referring to. I need this pop up to be positioned relative to that green number, so the arrow is always pointing to it. Right now the pop up code is inside that right column, and then positioned absolutely, relative to the sidebar div.

 

As you can see, it seems to be working okay. But the overlay layer doesn't go over top of the footer, and I'm clueless as to why.

 

The overlay div is fixed position, 100% width and height. It is located just underneath the pop-up content, so it's also in the sidebar div. If I move it outside the wrapper, such as just inside the body tag, it then overlays everything, including the pop-up. I've tried putting it in different places, top of page, bottom of page. I am either stuck with the footer not being covered by the overlay, or the overlay covering the pop-up.

 

I'm using a sticky footer technique if that makes any difference. Hopefully you can look at the code/css and see if there is something I'm missing. And if there is an easier way to get this overlay/lightbox effect, while being able to pop open a div from somewhere on the page and position the pop-up wherever I need it, please let me know!

 

http://webworkscorp.com/test/testing.html

 

Thanks!

I'm guessing you've altered the code since writing this seeing as though it doesn't conflict with the footer because there's a large gap between them...?

No, I haven't. I'm referring to the semi-transparent dark overlay. If you click to open the pop-up, then scroll down, you'll see that you can still click on the footer links and search box. That should all be covered by the overlay, and not usable. Does that make sense??

 

The only way I found to get it to cover the whole screen no matter what is to put it outside the wrapper, but then it seems like I get layering problems, even though I have the z-indexes way different. The dark overlay is on top of the pop up. Unless I move the pop-up div as well, but then I can't position where I need it to show up.

Remove z-index from wrapper and bottom

Remove z-index from wrapper and bottom

 

And replace the background-image on #bottom with a solid colour: #4d4d4d

Remove z-index from wrapper and bottom

 

This worked perfect, thank you! Any explanation why that was causing my problem, considering the z-index on the overlay was 1000, while the others were 150 or less.

 

 

@Alluziion: I need to use a background image to get a slight shadow coming off the footer. But I did see an overlapping problem earlier, and removed a background image from the footer and that fixed it, so I know to check that if this ever happens again.

Because you gave the wrapper element a z-index of 100 any children would inherit that

Aha...duh. Sometimes I just need a slap in the face. Thanks again!

Edited January 24, 201313 yr by sstarzyk10

@Alluziion: I need to use a background image to get a slight shadow coming off the footer. But I did see an overlapping problem earlier, and removed a background image from the footer and that fixed it, so I know to check that if this ever happens again.

 

You can add shadows with CSS.

 

Also, the reason I suggested that was when I removed the z-index from #wrapper and #bottom with my debugging tool on Chrome, your background-image on your #bottom became invisible.