Box position settings cover the following three areas:
(1) Box placement (Relative, Absolute, Fixed, Sticky)
(2) Box stacking order
(3) Box overflow
By combining these settings, you can create things like banners that move as the user scrolls, or layouts where a specific box always appears in front of others.
Opening the position settings
You can edit position settings for a box from the Box tab on the right side of the design editor.
Select the box you want to adjust the position settings for.
Open the Box tab in the right panel.
If the panel is closed, open the right panel first.
Scroll down within the tab to find the Position menu.
Adjust each field as needed.
If you've made changes to a live site, be sure to update your site from the publish panel.
(1) Box placement
This setting determines how a box is positioned — whether it's based on its parent box, surrounding boxes, or the entire screen.
There are four placement types: Relative, Fixed, Absolute, and Sticky.
For details and instructions on each type, see Box Placement: Relative, Fixed, Absolute & Sticky.
Placement | Description |
Relative | The box is positioned based on the surrounding layout flow and follows the layout rules of its parent box. |
Fixed | The box is fixed relative to the screen itself. It stays in the same position even when the page is scrolled. |
Absolute | The box is positioned relative to its nearest parent box, which acts as the frame. You can place the child box anywhere within that frame. |
Sticky | The box follows the normal layout flow like Relative, but temporarily locks in place relative to the screen or its parent box when a specified scroll position is reached. |
(2) Box stacking order
The stacking order controls which box appears in front when boxes overlap.
Default value: Set to 0.
Range: You can set values from -9999 to 9999. A higher number means the box appears further in front.
When boxes share the same value, those positioned lower in the Layers panel appear further in front.
(3) Box overflow
This setting controls how child boxes that extend beyond the boundaries of their parent box (overflow) are displayed. It's useful for creating scrollable content areas or masking elements you don't want visible outside the box.
For more details, see Overflow Settings.
z-index zindex front back foremost rearmost stack order foreground hidden