[Help]: Embla is always on top of every other content no matter what z-index I set

[thetanaz]

Summary

I'm using Embla carousel as a way of displaying listing photos for a second hand ecommerce web site I'm building. I'm using Laravel 11 + Inertia + React, and I'm also using Embla in conjunction with shadcnUI. What I've noticed is that Embla seems to have this weird always-on-top behavior, which is especially problematic because of my dropdown navigation. Here's a visual example:

The navigation dropdown should be above the embla carousel obviously but no matter how I set the z-index embla always comes on top.

At first I thought it was a shadcnUI issue so I simply made a 600x400 div that sits exactly where the carousel does, with a higher z-index than it and the carousel still overlapped it. The only way to cirucmvent this behavior was by using the usePortal hook and placing the div there, that was the only time the div actually went on top of the embla component. But the issue is that usePortal breaks shadcnUI's navigation component so I can't use it in practice. Any ideas?

If applicable, which variants of Embla Carousel are relevant to this question?

• embla-carousel (Core)
• embla-carousel-react
• embla-carousel-vue
• embla-carousel-svelte
• embla-carousel-autoplay
• embla-carousel-auto-scroll
• embla-carousel-solid
• embla-carousel-auto-height
• embla-carousel-class-names
• embla-carousel-fade
• embla-carousel-docs (Documentation)
• embla-carousel-docs (Generator)

Additional information

No response

CodeSandbox example

No response

[davidjerleke]

Hi @thetanaz,

Thanks for your question. Embla has no internal code that applies z-index to any element whatsoever. So this is either caused by your code or the other libraries you're using. Good luck finding the culprit.

Best,
David

[thetanaz]

You're right, it has somethin to do with the tag being rendered on top of everything else for some reason, even when I completely disabled embla and just left the imgs by themselves they still overlapped everything. Very weird bug.

[thetanaz]

Okay, I figured out the issue, just have no idea how to fix it.
<div class="flex" style="transform: translate3d(-599.606px, 0px, 0px);"><div style="flex: 0 0 100%; transform: translate3d(0px, 0px, 0px);"><img width="900" height="650" alt="image" src="/storage/listings/2/fZFccYEtJuiljMi2fZwaOi0AjVroUWnD8uRfPpOw.jpg" class=" bg-center object-cover w-full h-full "></div><div style="flex: 0 0 100%;"><img width="900" height="650" alt="image" src="/storage/listings/2/x40nmsD9PVtKkICJuyhR8ivWmWj2ql9dnPVBLiex.jpg" class=" bg-center object-cover w-full h-full "></div></div>

This is what my browser inspector shows and I just realized that embla uses transform:translate3d to move the images. I think this somehow overrides the stacking context and it makes it so the carousel always sits on top of any other items, no matter what z-index is set.

[davidjerleke]

@thetanaz I don't think that's how the browser works? See:

• CodeSandbox
• App view

[davidjerleke]

I've built and I'm maintaining Embla. Trust me when I say that Embla doesn't change any z-index at all. But I can't say anything about what Shadcn and the other libraries you're using are doing. Because Shadcn is a layer of logic on top of the pure Embla library.

[thetanaz]

I'm using the pure embla-react library from npm, I'm not using the shadcn version, I'm using it for my navigation menu. I'm really clueless as to what to do, if you say there's no affect on z-index I believe you. I will keep debugigng, if I find out the issue I will update just in case someone else runs into this issue.

[thetanaz]

I found the issue and I fixed it. On my navbar's main div I had backdrop-blur-lg as a tailwind css property applied. For some reason it was bugging out the z-index. When I removed it everything went back to normal. What a weird thing to stumble upon. Thank you for helping @davidjerleke ,that's one awesome library you have.