How can I fix the issue with sections passing under in Safari when using position sticky and position relative in Webflow?

When using position: sticky and position: relative in Webflow, Safari may cause sections to overlap or pass underneath each other. This is often due to stacking context and overflow issues unique to Safari's implementation of sticky positioning.

​

1. Check Parent Element Overflow

​

• Safari won’t apply sticky positioning correctly if any parent element has overflow: hidden, scroll, or auto.
• Inspect each ancestor (including wrappers or grid containers) of the sticky element and set overflow to visible.
• In Webflow: Select the element → Go to Style panel → Ensure Overflow is set to Visible.

​

2. Confirm Sticky Element Positioning

​

• Make sure the element you want to stay sticky is indeed set to position: sticky.
• Set a proper top offset (e.g., top: 0px or top: 50px) to tell Safari where to "stick" the element.

​

3. Avoid Conflicting z-index and Relative Positioning

​

• If a sticky element passes under a section, it may be due to z-index stacking order.
• In Webflow:
• Set the sticky element’s z-index to a higher number than the overlapping elements.
• Use position: relative on parent sections only if needed and avoid it on containers that affect stacking context unnecessarily.

​

4. Use a Container Inside Sticky Element

​

• Wrap content that needs to be sticky in an extra div block.
• Apply position: sticky to the inner div, not directly to rich content that may behave inconsistently.

​

5. Test and Adjust in Safari

​

• Use Safari's Web Inspector to verify if sticky is being applied.
• Check for yellow “invalid property” warnings—Safari might be ignoring sticky due to conflicting CSS rules.

​

Summary

​

To fix sections passing under sticky elements in Safari, ensure no parent has overflow:hidden, apply z-index correctly, and wrap sticky content in a dedicated div. These steps fix Safari-specific quirks in Webflow’s sticky behavior.