Z-index property that is independent from Auto Layout

Absolutely necessary feature:

Set z-index for item in auto layout.

So you can send item to backward or forward only visually.

8 Likes

We wana Z-indexing while Flexing and Flexing while Z-indexing!

8 Likes

This is a must. Thanks.

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

Especially when working with auto-layout, positioning elements become so hard because the z-index is tied to the layer order in a way that is impossible to change the z-index without breaking the whole layout (or opting-out of auto-layout completely).

This is a problem mainly with interactive components that have a “pop-up” or something that should appear on top of every other layer, the best example is tooltips!

image
image

My suggestion is to solve this as we would solve with CSS, creating a z-index controller that would be set to Auto as default, and if we want we can type any value to force the z-index:

I’ve heard from many people that they were facing positioning issues with auto-layout. What do you guys think about this?

14 Likes

plus one. Z index would be essential

1 Like

Explicit Z-index property has its pros and cons. For a start, it is going to be a mess. Even more a mess if you are using libraries. It is just too easy to abuse. I know same problem exists in CSS, where you often spend hours trying to figure out why something is not in a place it is supposed to be. I would rather see some entirely different way to solve “pop-up” problem.

For example, ability to position overlay relative to interactive component that invokes it.
Here is my quick mockup:

What do you think?

2 Likes

I think this would help but won’t solve the problem.

For tooltips, for example, we wouldn’t be able to change the text for each tooltip without creating multiple frames outside our main frame. In this case, it would be best to have the button and the tooltip itself in the same component/frame and adjust the z-position manually.

I agree, this would also help for the workflow on my end.
In general having overlays is a problem when using auto layout. So I am always have to find a good combination of contraints with no autolayout and autolayout.

Especially when on hover the hovered element is bigger and maybe even overlapping with items on the left or right, setting the z-index would help a lot!

Currently I have to move these kind of hover-overlays out of the variants canvas to make it work via interaction “open overlay”. This adds again some confusion when it comes to a handoff (to Devs or other Designers). Because suddenly not all states can be found in the variant area.

I wrote a small plugin that can reverse the z-indexes in an auto-layout.

It makes use of a hack using flips and reordering that was mentioned in another thread so a native solution would definitely be preferred, but for the time being this should help when you really need it.

1 Like

Cool, it does its job, quick and easy. :+1:

Hey, @James_Mitchell could you maybe rename this to something more descriptive? Like, ‘Reverse Autolayout Z-index’, for instance?

I can’t quite wrap my head around the fact that plugin names are so much out of the blue sometimes. :slight_smile: Like, good luck finding some plugins after a few weeks of not using them, then recalling ‘Ah, there was this great plugin I need for that’ and then you stare at that list, completely lost… :sweat_smile:

@Matt_at_HAUD I’ll have a think. I chose Easy Z because typing ‘ez’ as a quick action returns it as first result, whereas ‘Rev…’ matches too many other things.

If I can’t think of a suitable name I can anyway add a label to the command to make it more searchable / clear.

An absolute position has been implemented recently.

Screen Shot 2022-08-01 at 7.08.17 pm

Just ran into this problem. +1 for a z-index property (though I can’t imagine the potential mess/complexity this’ll introduce)

Aaaaand today again I have an issue that would really profit from a change to this behaviour :frowning:

1 Like

Are there any updates on this topic? I also came across this problem.

1 Like

+1 to this. would love to have an option of layer ordering and auto layout behavior being agnostic from one another (but maybe still self contained within its own component? a literal z-index as it behaves in css might be really really messy). advanced layout > canvas stacking can be handy in specific cases, but for example, if i have a dropdown subcomponent component that can either open upwards, or downwards, or both downwards and upwards at the same time, i cannot apply auto layout to a parent component without either the label above the dropdown or the text below the dropdown appearing in front of the actual dropdown subcomponent, but using absolute positioning for the subcomponent is also problematic, as the parent component will no longer react to different sizing options of my subcomponent.

2 Likes

Снимок экрана 2022-12-05 в 00.46.17
Yep, Z index is vital in case of using auto layout drop-downs

2 Likes

Would love this, as well

1 Like