Positioning defines how an element is placed within your layout. It gives you control over where and how an element appears relative to its container and other elements.
The following positioning options are available:
Relative
Absolute
Sticky
Fixed
Relative
A relative positioned element is placed in relation to its container, based on the container’s direction setting (either vertical or horizontal).
If the container’s direction is set to vertical (column), the element will be positioned next to the other elements in the container. The order of these elements is determined by their position in the Layers panel. Reordering the layers changes the order of elements within the container.
You can further adjust the element’s position by setting spacing around the element, as well as defining the distribution and alignment options in the parent container.
Absolute
An absolute positioned element is placed relative to the outer limits of its container. You set the offset from the container’s edges, and the element is positioned accordingly.
Absolute positioning may cause elements to overlap each other, as their position is determined by the set offset.
This type of positioning is not responsive, meaning the element will stay in the same position unless you define different positions for various screen sizes.
Sticky
Sticky positioning allows an element to scroll within its container, sticking in place once it reaches the top or bottom edge of the container.
The parent container must have enough space to allow the sticky element to move within it.
This is ideal for scenarios where you want an element, like a sidebar or gallery, to stay visible while the user scrolls through the content beside it (e.g., a gallery on the left that stays in place as the content on the right scrolls).
Fixed
A fixed positioned element behaves similarly to an absolute element but is not bound to its container. Instead, it is fixed relative to the browser viewport.
Fixed positioning is typically used for floating elements, such as floating navigation bars or sticky add-to-cart buttons.
The element will stay in the same position relative to the viewport even when the page is scrolled.
