Understanding Positions
Box positioning is fundamental to great web design. The editor in Studio.Design provides four positioning methods to help you create the perfect layout:
Relative Position (Default)
Fixed Position
Absolute Position
Sticky Position
Relative Positions
Relative positioning is the default setting. Boxes with relative positioning maintain their relationship with surrounding elements and automatically adjust based on screen size changes, making responsive design effortless.
Fixed Positions
Fixed positioning anchors boxes to a specific screen location, keeping them visible regardless of scrolling. This is perfect for elements that should always remain visible.
How to Set Fixed:
Select a box directly under the Base box (only these can be fixed)
Choose "Fixed" from the Position dropdown in the top-left of the editor
Set the position using pixel values from screen edges
For bottom-fixed elements, either drag the box or input position values
Common Uses:
Headers that stay at the top
Persistent sidebars
Always-visible contact buttons
Absolute Positions
Absolute positioning fixes a child box's position relative to its parent box. This is ideal for decorative elements that shouldn't shift with responsive layouts.
How to Set Absolute:
Select a child box within a parent-child box structure
Choose "Absolute" from the Position dropdown
Set the position by dragging or entering pixel values from parent box edges
Common Uses:
Text overlays on images
Badge labels like "New!" or "Sale"
Sticky Positions
Sticky positioning creates elements that switch between relative and fixed positioning based on scroll position. When you scroll, these elements stick to a specified position until their parent container exits the viewport.
How to Set Sticky:
Select your target box
Choose "Sticky" from the Position dropdown
Specify the trigger position using pixel values
This setting controls the exact point where your element switches to fixed positioning. In the image below, the sticky box is configured to become fixed when it reaches 48px from the top edge of its parent box.
Important Notes:
Preview sticky positioning using the Live Preview URL, not the editor
Only works when ”overflow” of the parent element is set to "visible"
Position values determine where elements become fixed
Common Uses:
Fixed table headers during scroll
Section-specific navigation
Persistent pricing plan headers in long sections