How to Fix Lightbox Issues in Webflow with Finsweet

In this tutorial, Sandro, cofounder of the Gemeos Webflow agency, shows you how to fix z-index and positioning issues with lightboxes in Webflow using Finsweet Attributes Lightbox.

Understanding the problem

Webflow’s native lightbox is inserted into the DOM wherever you place it in your layout. If an ancestor has overflow: hidden, transform, position: fixed, or a low z-index, the lightbox can get clipped, hidden, or positioned incorrectly. Finsweet Lightbox moves the lightbox modal directly to the root of the body when it opens, eliminating all of these CSS context issues.

1. Add the script to the head

<script src="https://cdn.jsdelivr.net/npm/@finsweet/attributes-lightbox@1/lightbox.js" defer>script>

2. Add the attribute to your lightbox

On your Webflow Lightbox element (the Link Block with the w-lightbox class), just add: fs-lightbox-element="lightbox". That’s it. Finsweet automatically handles moving it in the DOM when it opens and cleaning it up when it closes.

3. Lightboxes in CMS Collections

Finsweet Lightbox works perfectly inside Collection Lists. Each lightbox in the list is handled individually. Linked image galleries (a lightbox group with previous/next navigation) are supported too.

Conclusion

Finsweet Lightbox is a one-line attribute solution to a recurring problem. Use cases:

• Image galleries in sections with overflow: hidden
• Lightboxes in cards with transform (hover effect)
• Lightbox videos in complex layouts