Position Stack: Fix element inside Section?

Is there a way to fix an element using the position stack inside a section?

At present, if you tick Fixed it fixes to the entire page.

Don’t tick fixed, leave the utility option to none or absolute. The grey area is a section:

In both these instances (none or absolute) the content of the Position stack scrolls with the page. I want it fixed, but fixed to the section it’s in, not the entire page.

I’m not sure I understand what you mean, for the content is fixed (absolutely positioned is the term) into the Section as you can see in the screenshot. Maybe you’re trying to get a fixed Section instead?

Ya, I’m explaining myself badly.

In this example, the red icon is in a postion stack, inside a section stack, set to position centre and fixed, so that as the section scrolls the icon doesn’t.


But, the icon is fixed to the page, not just the section, so it’s visible all the time, not just when the section is in view.

Image instead of icon inside the section it was a background with a fixed image. This image would only be visible as the section is in view, not all the time.

Does that make sense?

If you set the position to fixed it will be fixed to the body of the page, no matter if the actual stack is inside a section. Maybe the Background with the fixed image option will do the job best.

1 Like

Thanks Lucas, I thought that might be the case. I’ll look at some option.

Yep it will act just like the example on the docs: https://uikitstacks.com/documentation/background/#Fixed

1 Like