How can I resolve the issue of a dropdown in a Webflow collection list opening under the CMS item below it, even after adjusting z-index and position?
TL;DR
- Set the parent CMS item to position: relative and the dropdown to absolute with a high z-index.
- Ensure parent elements have overflow: visible and remove any transform or filter styles that could create new stacking contexts.
You're facing a dropdown positioning issue in a Webflow Collection List where the dropdown overlaps incorrectly under another CMS item. This is typically caused by issues with stacking context, overflow settings, or incorrect parent positioning.
1. Check Parent Element’s Position Property
- Set a parent element to
position: relativeso that the dropdown withposition: absolutecan be correctly positioned within it. - Apply this to the element that wraps each CMS item, such as the Collection Item or a div inside it.
2. Confirm z-index Values Are Applied Correctly
- Ensure the dropdown element (and its open state element) has a higher
z-indexthan any adjacent content. - For example, use
z-index: 9999on the dropdown and a lower value like1on the base CMS item if needed.
3. Set Overflow to Visible
- Check the parent elements (e.g., Collection List, Collection Item, or wrapper divs) and ensure that their
overflowis set tovisible. - If any parent has
overflow: hidden, it will clip the dropdown even if z-index is correct.
4. Avoid Stacking Context Issues
- Elements with
transform,filter,will-change, orperspectivecan create a new stacking context, which can restrict howz-indexbehaves. - Remove any transform or filter styles on parent elements if you're still having issues with z-index not applying correctly.
5. Use Webflow’s Dropdown Component Properly
- If using the native Dropdown component inside a Collection List, ensure that the dropdown list is inside the same Collection Item and doesn't extend outside of it.
- Webflow sometimes wraps the dropdown with auto-generated classes and behaviors that can conflict with manual positioning, so inspect the DOM structure carefully.
Summary
To fix the dropdown overlapping issue in a Webflow Collection List, apply position: relative to the CMS item, ensure z-index is high, set overflow to visible on all parent wrappers, and eliminate styles that may create stacking context. This will allow the dropdown to correctly render above other items in the list.