Fix Position when scrolling for background (or any other layer not on top)

Why not just be able to put fixed position elements wherever you want. I don’t understand why they have to always be on top.

I agree that you should just be able to put fixed elements wherever you want in the layer stack. I’m running into an issue like this in my current project where we have a slight gradient in the background that we want to be fixed on scroll, but we also have a top nav bar that content needs to scroll under. I’m aware of the nested frame solution, but it doesn’t really work for this application because the scrolling frame has to have clip contents on, which then hides all of the content further down on the page.

@Abderezak

I agree with @Puristi and @Andy5 , I would like to be able to fix objects without having them be on top. I also am trying to fix a background, but this can’t(?) be done without the background covering everything else right now.

EDIT: I found a solution in the thread “Fixed background in prototyping” here on the forum (can’t include link because links are not allowed, search for it to find it)

Here is the file with examples: https://figma.fun/GfJsF7

Quick followup to this. We ended up solving this by making the background gradient into a component, then copying that component into the background of our header bar. In this scenario you can have clip contents for the scrolling frame off, and it will go “under” the header bar without being seen.

A little bit of a hacky solution, but it worked out in the end.

Figma developers, please remove this fixed/scrolls “feature”, it’s just awful! Why is it that when I mark something as “Fix position when scrolling”, it automatically moves up into a separate category? It makes absolutely no sense and just messes everything up. Why does this feature exist? If I need to move some fixed layer/folders/framer to the top - I can do it myself, thanks, no need to do it automatically! What makes you think that if I have fixed the position of some layers, then I necessarily want to see it on top of other layers?🤷 This is so annoying I just don’t have the words, I haven’t seen anything like this anywhere else. I found some “crutches” on how to get around this “feature”, but I don’t feel like doing such silly things. Please fix this or make it possible to disable this “feature”. Thank you.

My use case is a modal that scrolls on top of a static background. Currently, on scroll all the background elements overlap the modal.

Reference/example: In Trello you open a card and can scroll the modal while the background is static.

The use case Jenny1 described here is incredibly common. How this is not possible baffles me.

There are SO many “hacks” that I have had to do because of little things like this. It’s out of hand, especially when it comes to nested components. There are so many odd things that I have to do, or so many unconventional ways of layering things just to get a prototype to behave how I want it.

Please do not make this a whole year of users begging for this problem to be fixed. If we have to spend a lot of extra time trying to hack our way though a prototype build, I am confident teams will start migrating to a more robust program like Adobe XD.

I want to be able to do this too - really challenging when fixed elements jump to the top!

You can do this now with the “absolute positioning” option in the properties panel on the top left.

Hi guys,
I still don’t get how to do this, I wanna have a static background as well. I don’t think I’ve seen a more non intuitive and non user friendly app than Figma, they seem to do everything out of spite, thank GOD not all clients and developers are obsessed with Figma.

Please, can anyone help?
Thank you!

Yes, having the ability to decide which layers are fixed but still respecting the layering stack order from the side panel would be amazing 🙏

@Cristian_Banu

Attached is a link to a Figma example:

Here is an example of a static BG with scrolling content in front.

@Jeremy_Dennis
Thanks for the file bro :slight_smile 🙂
Howver, it still scrolls after the content is done scrolling. It doesn’t behave like XD, which is simply static, no “hacks” and workarounds needed.

Yea I faced the same issue and felt this solution would be best. I think there is some complication to it. But I would like to know what

I have a text layer blurred that I want to be there in the background as images come over it as the user scrolls. How can I do it?
I did not understand the work around that you explained 😅

Makes zero sense to have the fixed elements above everything else. Also, makes no sense that the auto layout stacked elements’ z index depends on their vertical order.

+1 Got this issue too… Would be great !

You don’t have to set the element (e.g. the background image) which has an absolute position to the top.

Just to make sure you set the order of the parent auto-layout frame to first on top (have a look at the image attached).

I’m having the same issue while creating an agenda table view where some elements need to be fixed below others that scroll. 🥺
I’m pretty sure you could do this on older versions of Figma, wich is weird.

Here you can see how to fix this, it worked for me! https://www.figma.com/file/CEwOHEoQ28tCwsH3sHibuV/Prototyping-Tips-%26-Hacks-(Community)?node-id=63-582&t=mPZVwj5R8GDNoCJa-0

I tried this fix for the same problem, but it’s not working. I also have a fixed navbar in addition to the fixed background image.

@Veronica_Alegria1 has a great “hack” solution for this, but to the Figma team: I wouldn’t consider this fully solved since a native solution would be much better. I want to +1 all the requests to allow elements to be “fixed” while maintaining their existing place in the layer hierarchy. That just seems to make much more sense from a flexibility and control standpoint. While it might make the layers panel interface potentially more convoluted, there must be ways to visually differentiate these elements other than section headers “FIXED” and “SCROLLS”.