Skip to main content
sekeidesign
April 7, 2021
Question

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

  • April 7, 2021
  • 35 replies
  • 58653 views

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)

This topic has been closed for replies.

35 replies

Jc_Martel
April 7, 2021

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:
https://forum.figma.com/t/auto-layout-reverses-the-order-of-my-layers/1190

Chris_northswiss
June 14, 2021

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

Slava_Bronevitskiy
Active Member
August 18, 2021

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

impactby.design?ref=nI
Harun_Alikadic1
New Participant
August 30, 2021

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;”)?

Slava_Bronevitskiy
Active Member
August 31, 2021

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”?

impactby.design?ref=nI
Craig_Garner
New Participant
October 19, 2021

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

Arjun_Mehta
October 21, 2021

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!!

Anna_Willoughby
December 10, 2021

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

Bobby_Spiecher
December 13, 2021

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.

Lotty_Cheshire
December 14, 2021

This worked 🙌