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 dropdown’s parent element to relative or absolute positioning.
- Make the Dropdown List absolutely positioned (e.g., top: 100%, left: 0).
- Assign a high z-index to the Dropdown List and avoid conflicting stacking contexts.
- Ensure parent containers don’t use overflow: hidden.
- Use transform or will-change on the parent if stacking issues persist.
When a dropdown in a Webflow Collection List opens beneath the CMS item below it, it’s usually due to layout structure and stacking context—not just z-index. Here’s how to fix it step-by-step:
1. Set the Dropdown to Relative or Absolute
- Select the parent element of the Dropdown (e.g., the Link Block or Div inside the Collection Item).
- Set its position to
relativeorabsolute. This ensures any absolutely-positioned children (like the open dropdown menu) are positioned properly within it. - Avoid 'static' positioning on any container involved with the dropdown.
2. Ensure Dropdown List is Absolutely Positioned
- Select the Dropdown List element inside your dropdown.
- Set Position to
absolute, with values like top: 100% and left: 0 so that it opens directly beneath the toggle button. - This pulls the Dropdown List out of the regular document flow, avoiding overlaps with other collection items.
3. Increase Z-Index of the Dropdown List
- With the Dropdown List selected, set a higher z-index (e.g., 999) to make sure it appears above lower CMS items.
- Also make sure the parent containers don’t create conflicting stacking contexts—those with
overflow: hidden,z-index, ortransformcan interfere.
4. Watch for Overflow Settings
- Check all parent containers (especially the Collection List Wrapper and Collection Items).
- Make sure none of them are set to
overflow: hidden, as this can clip dropdown content that overflows downward.
5. Use Transform to Create Stacking Context if Needed
- In some cases, adding a transform (like
transform: translateZ(0px)) or setting will-change: transform on the dropdown parent can create a new stacking context and resolve rendering issues.
Summary
To fix a dropdown inside a Webflow Collection List opening behind items below, ensure the dropdown's parent is relative or absolute, the Dropdown List is absolutely positioned with a high z-index, and no essential parent elements have overflow: hidden. This guarantees the dropdown stays visually on top.
