In the Studio.Design editor, you can choose from four position types for boxes: Relative, Fixed, Absolute, and Sticky. By combining these options, you can create scroll-following headers, overlapping decorative elements, and much more.
You can configure this under [Position] in the [Box] settings tab on the right panel.
Types of Position Settings
Here's an overview of how each position type works and when to use it.
Position Type | Reference Point | Behavior on Scroll | Common Use Cases |
Relative | Parent box | Moves along with other boxes in the flow | General-purpose layouts |
Fixed | Entire screen | Always stays in the same position on screen | Fixed headers and sidebars |
Absolute | Nearest parent box | Stays fixed within the parent box | Overlaying labels, icons, etc. |
Sticky | Parent box or screen | Behaves as relative until a set point, then temporarily becomes fixed | Headers and menus that follow on scroll |
Relative
Relative positioning places a box based on its relationship with other boxes and the normal layout flow.
When the screen width changes on smartphones or tablets, the position and spacing of elements automatically adjust according to the alignment direction and arrangement rules.
Relative is the default position setting and the best choice for responsive design.
For standard layout elements like headers, body content, and images, keeping them set to Relative helps maintain a consistent layout across multiple devices.
Fixed
Fixed positioning keeps a box in the same location on the screen at all times, using the screen itself as the reference point.
When you set a box placed directly under the Base box (Base <div>) to [Fixed], it stays locked to a specific position on screen and is not affected by scrolling.
This is ideal for headers, sidebars, or contact buttons that should always be visible.
How to Set Fixed Positioning
Select the box you want to set to Fixed.
Make sure it's placed directly under the Base box (Base <div>)
.
Click the [Position] input field and select [Fixed] from the dropdown menu.
In the [Distance] fields, enter the distance in px from each edge of the screen to set the display position.
If you want to fix the box to the bottom of the screen, for example, drag it to the edge of the screen first, then fine-tune by entering values in the [Distance] fields.
Absolute
Absolute positioning fixes a child box's location relative to its nearest parent box within a nested structure.
This is useful when you want to overlay decorative elements inside a parent box, such as labels on a photo or "new" badges on icons.
How to Set Absolute Positioning
Select a child box within a nested parent-child box structure.
Click the [Position] input field and select [Absolute] from the dropdown menu.
Set the display position of the box. You can either drag the box to where you want it, or enter the distance from each edge of the nearest parent box in the [Distance] fields (in px).
Sticky
Sticky positioning starts out as relative, then switches to fixed when the box reaches a specified scroll position. Once the parent box finishes scrolling, the fixed behavior is released.
This is great for elements you want to follow the user only while scrolling through a certain area, like pricing table headers or blog sidebar navigation.
Note:
Sticky positioning cannot be previewed in the editor. To check how it works, use the preview URL.
Sticky positioning only works when the parent element's overflow setting is set to [Visible] or [Scroll]. If it's set to [Hidden], sticky behavior will be disabled and the box won't stay fixed on scroll.
[Visible]: Works with the overall page scroll.
[Scroll]: Works with scrolling inside the parent element.
[Hidden]: Disables sticky positioning entirely.
How to Set Sticky Positioning
Select the box you want to set to Sticky.
Click the [Position] input field and select [Sticky] from the dropdown menu.
Set the scroll position at which the sticky box switches to fixed display.
In the [Distance] fields, enter the distance from each edge of the parent box (in px).
This controls the exact point at which the element becomes fixed while scrolling.
In the image below, a box set to Sticky is configured to become fixed at 48px from the top edge of its parent box.
fixed to screen sticky header sticky