Is there any way to change the "z-index" of an auto-layout child?

I’m using auto-layout for this modal, just like I do for pretty much everything else, and I’m creating a modal, with a text field, and a dropdown.
The dropdown should float above the buttons, and I’d prefer to do this with auto-layout. (I know I could use an overlay, it would be nice to control the z-index somehow though)

12 Likes

There is unfortunately no way to do so as of today. You would have to remove auto-layout entirely or maybe use variants of a component without autol-layout?

Check this other post too:

I’ve also just come across this same issue. Would be nice to be able to override the z behaviour.

1 Like

Same problem. Can’t build prototypes without adjustable z-index

3 Likes

Still no override for this? If I do not use auto-layout I cannot have component elements “Fill container”. So I cannot have possibility to scale manually component instances. But, if I use auto-layout my helper tooltip stays on the lower z-index. Is there maybe a way to reverse the ordering in the auto-layout or force the z-index like in html (like “z-index: 10001 !important;”)?

3 Likes

I’ve submitted a feature request recently.

Can we keep upvoting and resubmitting until @anon21722796 accepts the importance of this and replies “We have added this to our roadmap”?

12 Likes

Agreed, this is an essential feature that Auto Layout should support. Any word from @Figma_support?

1 Like

Also encountering this issue. We want to componentize dropdown as an input state, but the order of layers is getting in our way. Seems like such a huge limitation!!

5 Likes

This is such a kludgy way to handle auto layout… please fix this it’s making things so unnecessarily difficult

I’ve done this. It’s a wonky solution, but it works. If your object is at the top of the auto layout order in layers, move it to the bottom. Flip the entire group (that has auto layout applied) vertically (Object>Flip Vertically, or ‘Shift + V’). Then flip each individual item in the auto layout order in layers vertically so that everything is displayed right side up. You may need to do some additional layer sorting for the other items. But now, you’ll notice the z-index ordering is reversed so that things overlap the way you want them to. If this is in a component and you want to avoid things flipping in your designs, group everything in a container group and move your auto layout to the container.

11 Likes

This worked :raised_hands:

1 Like

@Bobby_Spiecher I combined the steps of your hack into a plugin you so you can do it in one step now.

Same wonky solution so not ideal but at least it’s faster.

3 Likes

I agree, we need to be able to manually adjust the z-index of layers without interfering with the order they are laid out.

[Usecase]: In my case I have an autolayouted frame which holds three layers, one of which contains a child which overflows the parent. This represents a dropdown menu being active which should not push content downards.

This is the way

1 Like

Yeah, here is another need :frowning:. That can be similar as “fix scroll” usage maybe.

There’s actually an easier way to do this reversal “hack”… Simply select the auto layout frame you wish to reverse and manually drag the top adjustment handle of the frame past the bottom of the frame to its same height.

That being said, @Figma_Support can we please get confirmation that you’ve seen this issue and are taking the step to build a feature that allows this z-index reversal? This hack breaks the auto layout by reversing the entire frame. Thus we cannot build components which have predictable overrides.

1 Like

Same problem on my side and I can’t delete my auto-layout because it will break the interaction of my prototype. Is there still no solution to keep using auto layout and force a certain z-index?

Not sure if anyone in this thread is still stuck trying to figure out how to achieve this, but you might have some luck by editing the “advanced layout” settings and change the canvas stacking setting to “first on top”, which essentially will reverse the z-index priority of the items in your auto layout frame: