Can not place overlay on top inside an autolayout

Interactive Components
#1

Hi there , i’ve been working on a design system , creating components using auto layout

The problem i’m facing is that when i create a frame with some text and add Auto layout to the frame and add constraints etc , now when i want to add an overlay on top of the auto layout it pushes the overlay under the text frame but i want it to be on top and still be responsive and it doesn’t seem to work

#2

Try moving your overlay with the arrow keys or the mouse, but hold down the Spacebar while moving.

#3

What you’re trying to do is impossible (in a clean way, at least) with Autolayout. You can either:

  • Change the “Fill” of you entire Autolayout Frame to simulate states and all (but the Fill will be in the background, effectively not covering the elements in your container)
  • Add a 0px Frame inside you Autolayout Frame, on the highest z-index. Inside the 0px Frame, add a rectangle with your overlay big enough to cover every possible size of your Autolayout container. Be sure to check “Clip content” so that you only see the overlay within the bounds of your Frame. It’s a hack, but the only possible option with Autolayout.

This thread asks for absolute positioning in AL containers, that would solve our issue.

#4

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