Positioning in Instant defines how an element is placed within your layout. It gives you control over where and how an element appears relative to its container, other elements, or the browser viewport.
Overview
Positioning determines the placement behavior of elements on your canvas. Different positioning types are suited for different use cases, from standard content flow to fixed navigation bars.
Available Positioning Options
Option | Description |
Relative | Positioned in relation to its container and sibling elements |
Absolute | Positioned relative to the outer limits of its container |
Sticky | Scrolls within its container, then sticks at a defined edge |
Fixed | Positioned relative to the browser viewport |
Relative Positioning
A relative positioned element is placed in relation to its container, based on the container's direction setting.
Behavior
Container Direction | Element Behavior |
Vertical (Column) | Elements stack on top of each other |
Horizontal (Row) | Elements appear side by side |
The order of elements is determined by their position in the Layers panel. Reordering layers changes the order of elements within the container.
Adjusting Position
Fine-tune relative positioning with these options:
Spacing — Set margins around the element
Distribution — Control spacing between sibling elements (set on parent container)
Alignment — Align elements within the container (set on parent container)
When to Use
Standard content layouts
Elements that flow naturally with page content
Responsive designs where elements should reflow
Absolute Positioning
An absolute positioned element is placed relative to the outer limits of its container. You define the offset from the container's edges, and the element positions accordingly.
Behavior
Element position is determined by offset values from container edges (top, right, bottom, left)
Elements can overlap each other
Position is independent of sibling elements
Important Considerations
Warning: Absolute positioning is not responsive by default. The element stays in the same position unless you define different positions for various screen sizes.
Consideration | Description |
Overlapping | Elements may cover other content |
Responsive | Requires manual adjustment per viewport |
Container-bound | Position is relative to parent container edges |
When to Use
Decorative elements that overlay content
Badges or labels positioned on cards
Creative layouts with overlapping elements
Sticky Positioning
Sticky positioning allows an element to scroll within its container, sticking in place once it reaches the top or bottom edge of the container.
Behavior
Element scrolls normally until reaching a defined edge
Once at the edge, element "sticks" in place
Element remains stuck while the container is in view
Unsticks when scrolling past the container
Requirements
Important: The parent container must have enough space (height) to allow the sticky element to move within it.
Common Use Cases
Use Case | Description |
Sidebar Navigation | Menu stays visible while scrolling content |
Product Gallery | Images remain in view while reading product details |
Table Headers | Column headers stay visible when scrolling long tables |
Add to Cart | Buy button stays visible on product pages |
When to Use
Side-by-side layouts where one side should remain visible
Long content pages with important persistent elements
Product pages with sticky buy boxes
Fixed Positioning
A fixed positioned element behaves similarly to absolute positioning but is not bound to its container. Instead, it is fixed relative to the browser viewport.
Behavior
Element position is relative to the browser window, not its container
Element stays in the same viewport position even when scrolling
Element floats above all other content
Common Use Cases
Use Case | Description |
Floating Navigation | Header that stays visible while scrolling |
Sticky Add to Cart | Purchase button always accessible |
Chat Widgets | Support buttons fixed to corner of screen |
Announcement Bars | Persistent messages at top or bottom of viewport |
When to Use
Elements that must always be visible regardless of scroll position
Floating action buttons
Persistent navigation or headers
Positioning Comparison
Feature | Relative | Absolute | Sticky | Fixed |
Follows content flow | ✓ | ✗ | Partially | ✗ |
Can overlap elements | ✗ | ✓ | ✗ | ✓ |
Responsive by default | ✓ | ✗ | ✓ | ✗ |
Bound to container | ✓ | ✓ | ✓ | ✗ |
Stays visible on scroll | ✗ | ✗ | ✓ | ✓ |
Quick Reference
Task | Action |
Set positioning | Select element → Right sidebar → Position |
Choose position type | Position dropdown → Select option |
Set offset (absolute/fixed) | Enter values for top, right, bottom, left |
Configure sticky edge | Position → Sticky → Set stick point |
Best Practices
Positioning | Best Practice |
Relative | Use for most content; let elements flow naturally |
Absolute | Set per-viewport positions for responsive layouts |
Sticky | Ensure parent container has sufficient height |
Fixed | Use sparingly; can obstruct content on small screens |