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)
- Home
- Forum categories
- Get Solutions
- Ask the Community
- Is there any way to change the "z-index" of an auto-layout child?
Is there any way to change the "z-index" of an auto-layout child?
- April 7, 2021
- 35 replies
- 55126 views
- 1 reply
35 replies
- 36 replies
- 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
- 3 replies
- June 14, 2021
I’ve also just come across this same issue. Would be nice to be able to override the z behaviour.
- Active Member
- 97 replies
- August 18, 2021
Same problem. Can’t build prototypes without adjustable z-index
- New Participant
- 13 replies
- 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;”)?
- Active Member
- 97 replies
- 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”?
- New Participant
- 12 replies
- October 19, 2021
Agreed, this is an essential feature that Auto Layout should support. Any word from @Figma_support?
- 1 reply
- 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!!
- 2 replies
- December 10, 2021
This is such a kludgy way to handle auto layout… please fix this it’s making things so unnecessarily difficult
- 1 reply
- 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.
- 11 replies
- December 18, 2021
@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.
Figma- New Member
- 3 replies
- January 26, 2022
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.
- 1 reply
- March 10, 2022
Yeah, here is another need 😦. That can be similar as “fix scroll” usage maybe.
- 2 replies
- March 28, 2022
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.
- New Member
- 3 replies
- June 28, 2022
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?
- 27 replies
- June 28, 2022
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:
1 Attachments
- Active Member
- 97 replies
- August 20, 2022
And now add a dropdown component where options open downwards, with tooltip flying upwards, and you are back to the frustration land.
This stacking order does not fill the need for z-index
- 27 replies
- August 31, 2022
Not sure if I understand your specific case correctly, but do you mean something like this?
I was able to achieve this without modifying any auto-layout child’s z-index. The Figma file is public so if you want to see how everything is set up you can do so here:
Figma – 31 Aug 22- Active Member
- 97 replies
- September 1, 2022
- 27 replies
- September 1, 2022
I see. You can still achieve this effect with auto layout and reversing the stacking order of items, but you will have to reorganize how your UI is built somewhat.
Instead of having a single vertical auto layout and several rows, you will want to have a vertical auto layout for each column’s rows (ID/Risk/Status). You can then set the stacking order for the Risk column to “First on top”, and the stacking order for the Status row to “Last on top”.
I updated the file I shared earlier with this prototype, so feel free to take a look at it to see how I’ve set it up. Maybe not the cleanest solution, but it will do what you need.
1 Attachments
- Active Member
- 97 replies
- September 2, 2022
Hi Simon. I appreciate you going new lengths to workaround the lack of adjustable z-index mechanism and recreating the scenario.
You solved the problem locally. There are many other creative ways to solve this locally. Like rendering tooltips as overlays for example.
You changed the layer structure from row-based to column-based. This allowed you to have up and down flyouts to display correctly, but broke row hover possibility, cell stretching when one of the cells has multi-row content and will still have the same z-index issue for everything extending left and right. So you basically rotated the problem from vertical plane to the horizontal, creating additional non-z-index related errors.
Without z-index properly implemented by Figma, workarounds will always be solved in one place, but always break in another.
We have a modular (cell content, cell, row, grid) data grid component in our design system, used across an enterprise application landscape. And data grid is just one of many components affected by the lack of z-index. Others are lists, selectors, search forms and more.
Patching all instances locally is a seriously bad decision because of the scale. It will require design maintenance effort that is larger than the benefits it returns. We are better off calling front-end developers when they are about to develop the UI to explain things verbally, or creating a throw-away screenshots.
Although your help effort is appreciated, this is not an issue a community member can help resolve. This is a request to Figma dev team for an irreplaceable functionality. Unfortunately Figma is not hurrying.
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)
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
I’ve also just come across this same issue. Would be nice to be able to override the z behaviour.
Same problem. Can’t build prototypes without adjustable z-index
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;”)?
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”?
Agreed, this is an essential feature that Auto Layout should support. Any word from @Figma_support?
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!!
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.
This worked 🙌
@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.
Figma
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
Yeah, here is another need 😦. 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.
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:
This worked. Cheers Bobby
Thank you! You’re a hero.
This Really Worked <3
And now add a dropdown component where options open downwards, with tooltip flying upwards, and you are back to the frustration land.
This stacking order does not fill the need for z-index
Not sure if I understand your specific case correctly, but do you mean something like this?
I was able to achieve this without modifying any auto-layout child’s z-index. The Figma file is public so if you want to see how everything is set up you can do so here:
Figma – 31 Aug 22I see. You can still achieve this effect with auto layout and reversing the stacking order of items, but you will have to reorganize how your UI is built somewhat.
Instead of having a single vertical auto layout and several rows, you will want to have a vertical auto layout for each column’s rows (ID/Risk/Status). You can then set the stacking order for the Risk column to “First on top”, and the stacking order for the Status row to “Last on top”.
I updated the file I shared earlier with this prototype, so feel free to take a look at it to see how I’ve set it up. Maybe not the cleanest solution, but it will do what you need.
Hi Simon. I appreciate you going new lengths to workaround the lack of adjustable z-index mechanism and recreating the scenario.
You solved the problem locally. There are many other creative ways to solve this locally. Like rendering tooltips as overlays for example.
You changed the layer structure from row-based to column-based. This allowed you to have up and down flyouts to display correctly, but broke row hover possibility, cell stretching when one of the cells has multi-row content and will still have the same z-index issue for everything extending left and right. So you basically rotated the problem from vertical plane to the horizontal, creating additional non-z-index related errors.
Without z-index properly implemented by Figma, workarounds will always be solved in one place, but always break in another.
We have a modular (cell content, cell, row, grid) data grid component in our design system, used across an enterprise application landscape. And data grid is just one of many components affected by the lack of z-index. Others are lists, selectors, search forms and more.
Patching all instances locally is a seriously bad decision because of the scale. It will require design maintenance effort that is larger than the benefits it returns. We are better off calling front-end developers when they are about to develop the UI to explain things verbally, or creating a throw-away screenshots.
Although your help effort is appreciated, this is not an issue a community member can help resolve. This is a request to Figma dev team for an irreplaceable functionality. Unfortunately Figma is not hurrying.
Related topics
How to add a component as child element to another component?icon
Ask the CommunityImprove the New Position Sticky Implementation
Suggest a FeatureHow to replace one instance with multiple other instances?icon
Ask the CommunityLAUNCHED: Nested variant component override controlsicon
Suggest a Feature[Config 2025] Figma Sites is here — let’s hear what you think! 💻
Share Your Feedback
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.
Scanning file for viruses.
Sorry, we're still checking this file's contents to make sure it's safe to download. Please try again in a few minutes.
OKThis file cannot be downloaded
Sorry, our virus scanner detected that this file isn't safe to download.
OKCookie policy
We use cookies to enhance and personalize your experience. If you accept you agree to our full cookie policy. Learn more about our cookies.
Cookie settings
We use 3 different kinds of cookies. You can choose which cookies you want to accept. We need basic cookies to make this site work, therefore these are the minimum you can select. Learn more about our cookies.