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.
Common Uses:
Headers that stay at the top
Persistent sidebars
Always-visible contact buttons
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
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.
Common Uses:
Text overlays on images
Badge labels like "New!" or "Sale"
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
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.
Note:
You cannot check the status of sticky positioning in the editor. Please use the preview URL to verify how it works while editing.
Sticky positioning is only effective when the parent element's "overflow" setting is set to "visible" or "scroll".
"Visible": The element will respond to scrolling of the entire webpage.
"Scroll": The element will respond to scrolling within its parent element.
"Hidden": Sticky positioning will be disabled and won't function.
Common Uses:
Fixed table headers during scroll
Section-specific navigation
Persistent pricing plan headers in long sections
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.
