Usually components in Replo are laid out in containers which are stacked horizontally or vertically. However, sometimes it's useful to have a component positioned over another one - for example, to have a callout button on the corner of a product image.
Replo allows you to change the positioning of a component using the Position dropdown. You can change the position to:
- Default, which means that the component will be positioned normally within its container.
- Relative to Container, which means that the component will ignore everything and be positioned offset from one of the corners of its container. How far away it is from the corner can be configured using the offset fields.
- Fixed, which is the same as Offset From Container except that the component is offset from the corner of the entire viewport, instead of from a container. This is useful when you want to have a component in the corner of the page always, even when the user scrolls.
- Sticky When Scrolled, which is the same as Default except that when the user scrolls down the page, the component will stay "stuck" to the top of the viewport until its container is scrolled out of view.
- Sticky To Header, which is the same as Sticky When Scrolled except the component will stick to your Shopify Store's header instead of to the top of the page.