Hi,
I’ve been trying to fix an issue with a child element’s fixed position, which seems to “break” after animation of the parent.
The issue is on my page “portfolio” here: https://fashion-is-fiction.webflow.io/portfolio
read-only link: https://preview.webflow.com/preview/fashion-is-fiction?utm_medium=preview_link&utm_source=designer&utm_content=fashion-is-fiction&preview=9f0e06ad9e728abaaff2cd4e1fccff61&pageId=5eb32ce0938c1068e2656330&mode=preview
Here’s a screenshot on load:
I’m trying to create a portfolio that is filter-able by either skill or project type (category). I’ve built 2 tabs elements, with dynamically populated portfolio items in each tab using a collection list for the portfolio items and multi-reference fields for the filter options - “skill” in one tabs element, “project type”(category) in the second tabs element. The toggle in the “subnav” at the bottom of the viewport switches between these two tabs elements by animating them to appear/disappear alternatively. So far so good, all of the above works.
I want the portfolio items to expand to full browser size on click, so I created a separate div (called “portfolio lightbox wrapper”) within the collection item that is animated to appear and disappear when the portfolio item (trigger) is clicked. That “portfolio lightbox wrapper” div has a fixed position, so it covers the entire viewport, allowing the user to see the full image.
example:
Upon page load, this works fine, UNTIL you trigger the switch-toggle for the first time. After that, the “portfolio lightbox wrapper”'s position is no longer fixed, and it is limited to within the tab content element. This affects all tabs from that point on. example:
In trying to find a solution I came across this:
Siton_Systems wrote, in response to a similar problem:
Summary - I made a test. If you set the child to
position:fixed;and move by interaction the parent - webflow override the fixed position.
Is it true that a child element can’t keep a fixed position if its parent is animated?
Is there any way I can get this to work, or get the same result (filter collection list items by 2 different sets of filters, and expand a collection item into a lightbox) without using custom code? Unfortunately the solution in the thread I linked doesn’t apply to what I’m trying to do (I think).
Would really appreciate any help/info/alternate ideas, as I’ve been trying to solve this (intermittently) for months.
Thanks!