Free Form Positioning, also known as absolute positioning in CSS, allows for flexible placement of elements within a screen. It enables elements to scale across different device sizes by anchoring them a specific number of pixels from the edge. This mode replaces standard % based sizing controls with static Px inputs to prevent element overlap on various devices.
Before you begin
Determine which elements you want to turn on free form positioning for. We recommend you use the same positioning method for all elements within a container (for example, for all buttons in a container.)
Enable free form positioning for an element
Click the element you want to adjust
Select the three dot menu.
Click Positioning.
Select Free Form Positioning.
Adjust position anchor settings
Position anchors control where the element displays. To move the element:
Click the element and its controls appear in the editor window.
Under the Position Anchor section, use the controls to adjust the:
Horizontal anchor: quickly move left, right, center.
Horizontal distance anchor by pixel: further adjust as needed.
Vertical anchor: quickly move up to top, center, and bottom.
Vertical distance by pixel: further adjust as needed.
For example, to move a header higher on the screen, adjust the vertical distance by increasing or decreasing the number.
Increase textbox width
Select the element
Under Sizing, adjust the width up (or down) as needed.
Turn off free form positioning
If you turn off free form positioning, the element will snap back to its original location. To turn it off:
Select the element.
Click the three dot menu > Positioning.
Click Auto Positioning.
FAQ
Does Free Form Positioning work with Style Independently?
Yes! You have full control to turn on Style Independently and use free form positioning to ensure the placement of your elements look perfect across both devices.
Is Free Form Positioning ADA compliant?
Yes it is. A screen reader will be able to detect the order of the elements
Can I overlap elements?
Yes you can, but we recommend you are careful with the way your elements are positioned.