duncanmcdougall / Responsive-Lightbox

Lightweight, image only responsive, jQuery lightbox plugin
https://www.belter.io/responsive-lightbox/
113 stars 47 forks source link

z-index conflict with Bootstrap navbar-fixed-top #7

Open iversoncreative opened 11 years ago

iversoncreative commented 11 years ago

Thanks for sharing this simple and lightweight plugin.

I implemented this lightbox on a Bootstrap built site and noticed a conflict with the navbar-fixed-top. Though the navbar was fading back, the close button was hidden beneath it, and images that were tall enough were being cut off by it. I added a z-index to the #lightbox and it's fixed.

Otherwise, works perfectly. Again, thanks.

DouglasdeMoura commented 10 years ago

I've added

#lightbox { z-index:99999; }

and this issue was fixed. See working here: http://blogdaengenharia.com/como-consegui-uma-calculadora-grafica-de-graca/ (click in the first image of the post).

nathanhornby commented 10 years ago

I'm having this issue on a non-bootstrap site.

Using a fixed header with a z-index of 98, it's still sitting on top of the close button, even though it's set to 9999. Something else at play?

nathanhornby commented 10 years ago

I ended up fixing this by giving the .lightbox itself a z-index.

So z-index order ended up being forced to:

.lightbox-button
.lightbox-caption
.lightbox
header

I'll push a change over, but might need testing.

quizclubiitindore commented 10 years ago

I tried to use navbar and lightroom in bootstrap site but only either of them is working. Both of them are not working simultaneously.