Skip to main content
Position
Updated over 2 months ago

Through position, you can define how an element is being positioned within your layout.

The following position options can be used

  • Relative

  • Absolute

  • Sticky

  • Fixed

Relative

A relative positioned element is being positioned based on the container direction setting that contains this specific element (parent container). So if the direction is set to vertical (column), then the element will be placed next to the other elements already present within this container. The order of these elements is defined by the order within the layer panel. Reordering these layers changes the order of the elements within a container.

Additionally you can influence this position by spacing on the outside of the element and defining the distribution and alignment options on the parent container.

Absolute

For absolutely positioned Elements you choose their offset from the outer limit of the container they are in. Absolutely positioned Elements may overlap other Elements. Absolute positioned items are inherently not responsive and always will retain their position unless you define a different position for a different screen size.

Sticky

With position sticky, you allow an element to move within the parent container based on your scroll position, but it cannot go beyond the container in which it is placed. The parent container is required to have space for the sticky element to be able to move within. This works best when having for example a gallery on the left, and a longer content section on the right. Then the gallery can stay in place as you scroll while the container next to it will scroll until you reach the end of this container.

Fixed

The positioning of a Fixed element is similar to an Absolute positioned element, but instead of being bound to the parent container, it is bound to the edges of the browser viewport. Position fixed is mostly used for a floating add to cart bars and floating headers.

Did this answer your question?