Figma Support Forum

Z-index problems with AutoLayout

I’m seeing a problem with z-index when working with AutoLayout. The order of the layers is reversed, while the top layers in stack have a bigger z-index, so when I’m stacking the header and the body of the page into an Autolayout component, the body has a bigger z-index, hence, the shadow of the header is overlayed by the body’s background. I know a workaround is to set the background for the whole frame instead of the body, but it won’t always be the case. The thing is, even though it might be true to other design programs such as Photoshop, HTML doesn’t work the same way. Nobody sets the background-color for the body tag. It will definitely confuse the developers. Maybe perhaps allow z-index for AutoLayout?


This same issue is happening with interactive components if used in auto layout. I have a menu and page’s content in auto layout, top down, the menu is under the content in layers, because it needs to be on top in auto layout. If I am now hovering on an interactive component in my menu, the dropdown is shown under the content. What can I do about that?

1 Like

+1000. a z-index control would be amazing and incredibly useful. Very frustrating working with interactive dropdown forms in autolayout lists.