I’m having trouble with dropdown menus in my Figma design. When I open a dropdown by clicking on it, the options list appears behind other dropdown components on the page instead of in front of them. This happens with all three dropdown components I have in my design. I think this might be related to layering or positioning issues in Figma. Each dropdown is built as a component with different variants for the open and closed states. What I want is for the dropdown options to appear above all other elements when opened, not hidden behind them. I already tried rearranging the variants and using auto layout, but auto layout messes up my visual arrangement. Does anyone know how to fix this layering issue?
This is definitely a z-index stacking issue - I’ve run into it tons of times. Figma handles layering weird for interactive components vs regular frames. When you’ve got multiple dropdowns at the same level, they fight for priority and the last one in the layer stack wins. Move your dropdown component higher in the layer panel - not just the variants, but the whole component above other elements. What worked for me was creating a separate overlay frame just for dropdown menus and putting it at the very top of my layer structure. Then use component properties to control visibility. This keeps dropdown options above everything else without messing up your existing layout.
Had the exact same issue building a multi-dropdown interface last month. Figma treats component variants as siblings instead of true modal overlays, which causes this mess. Don’t move entire components around - here’s what works: Make your dropdown options a separate component, then use component swapping to bring it in when needed. Position this dropdown component at your frame’s root level, not nested in the trigger. You can still connect them with boolean properties for visibility. The dropdown content lives independently from the trigger and naturally sits above everything else. More setup upfront but completely eliminates z-index headaches.
use absolute positioning for the dropdown rather than relative. make it a separate instance and position it outside the component’s boundaries. this way it won’t get clipped by parent containers and always renders on top. it’s a bit hacky but works whenever you’re dealing with overlapping UI elements in figma.