I have frequently met this problem earlier, but now I have another good example. When I need to build a form with interactive components, some layers are above the others and my dropdowns can’t open normally. Layers hierarchy is a very logical thing, but very restrictive, especially in auto layout.
yeah auto layout layer order is such a pain! I made a table without autolayout recently and I wanted to allow scrolling, but it causes the rows to overlay the table header when you try to scroll.
I ended. up wrapping all the rows in an auto layout container, and then surrounding the header, footer and this row container in a regular frame. If you need the equivalent of fill container you can just use left+right or top+bottom constraints. So I think you just need to go without auto layout in certain cases, where it makes sense but isn’t essential.
Definitely a need, it is the same with tooltips. Having a z-index for those elements would be best.
Here’s a hacky way to reverse the “z-index” ordering of Auto Layout layers:
Not the ideal solution and if you follow the Twitter thread linked from the file above, you can see that there is no easy answer. Figma mentions that a “layer ordering preference” could be a solution.
We really need z-index to be separate from layer order. I find myself detaching layouts frequently for these types of use cases and they’ll be even more common now that component hierarchy is removed from the context of the prototype.
This is why we don’t use overlays in auto-layout frames. We know double 180 hacks, but this causes a lot more problems. Like swapping components with hack and without a hack. Autolayout order in practice and in everyday work makes no sense for us.
Thanks @chudoloo, interesting! But yeah it looks like a hacky way.
May not be ideal, but couldn’t you solve this by manually positioning a prototype “overlay” component?
Issue is that overlays aren’t supported so won’t show if you use the component on another page, or via a library. So you have to redo it every time you want a dropdown and lose all the benefits of interactive components