So I created this scroll animation based on a CMS – when you click an item there should be a pop up in the center of the page filled with a multi image cms. Now my problem is, that the fixed element (popup) starts to move while you scroll the page. I can tell why… it’s because it is part of the scroll animation targeting the Items. But I cannot understand why, since Fixed is relative to the Body and not the single cms elements – in theory. as you progress you can clearly see that the popups are somewhat connected to the position of the portfolio items. if you click on the ones following the item is not even centered to begin with. I tried to create an animation which is only focused on the popup class which is working exactly against the first scroll. but it still moves. sometimes it just jumps to the left side of the screen.
Fixed positioning in Webflow allows elements to remain stationary relative to the viewport while scrolling. Here are some key points for implementing fixed positioning correctly:
The fixed element should be placed as a direct child of the body element, as fixed positioning is calculated relative to the page body. When creating popups or similar elements, ensure that no parent containers have their overflow property set to hidden, scroll, or auto, as this can interfere with the fixed positioning behavior.
For more detailed information about fixed positioning, particularly for navigation bars, you can refer to our documentation on navbar positioning.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
Hello Thank you for the answer – you provided link does not work.
As mentioned I cannot place it as a direct child, since its a cms which is forcing me to build it inside itself, in my case its even more complicated since its another CMS element inside the cms element since I want to use its multi image function.
Fix: don’t keep the popup inside the Collection Item , place a single modal at the page root (direct child of body) or remove any ancestor transform/filter/overflow (Webflow interactions add transforms that break position:fixed).
Quick pattern (had to fix this on a client site): create #modal outside the Collection List and on click clone the clicked item’s multi-image into it , e.g. document.querySelectorAll('.trigger').forEach(t=>t.onclick=()=>{const m=document.querySelector('#modal');m.innerHTML=document.querySelector(t.dataset.src).innerHTML;m.classList.add('open')}); and style #modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);}
Your readonly link is not working. If you’re sourcing your modal content from specific CMS items, you’ve built it correctly with the modal inside of the collection list.
Most likely you’ve built it using interactions and your interaction is changing the position or CSS stacking order of your modal.
Share a published page link too with info on how to trigger the modals and I can have a look.
