Skip to main content

Positions: Relative, Fixed, Absolute, and Sticky.

The Position feature lets you control how boxes are placed on your page.

Saika avatar
Written by Saika
Updated over 3 weeks ago

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:

  1. Select a box directly under the Base box (only these can be fixed)

  2. Choose "Fixed" from the Position dropdown in the top-left of the editor

  3. Set the position using pixel values from screen edges

  4. 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:

  1. Select a child box within a parent-child box structure

  2. Choose "Absolute" from the Position dropdown

  3. 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:

  1. Select your target box

  2. Choose "Sticky" from the Position dropdown

  3. 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.

Did this answer your question?