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

  1. Describe the problem your experiencing and how your idea helps solve this

Background scrolls with other elements. When I set “Fix position when scrolling” it jump upper and overlap other elements.

  1. Goal

Make background static when other elements can be scrolled on top of it.

  1. Solution

Add 3rd tab of scrolling type in the next order:

FIXED

SCROLLS

BACKGROUND or “BACK ELEMENTS” which is fixed but placed under the "SCROLLS’ layers.

Thanks!

9 Likes

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.

49 Likes

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.

3 Likes

@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)

3 Likes

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

3 Likes

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?:man_shrugging: 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.

image

13 Likes

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.

5 Likes

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

4 Likes

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.

6 Likes

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

1 Like

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

1 Like

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!

1 Like

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

@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 :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 :sweat_smile:

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.