# Layout Position types

The position CSS property sets how an element is positioned. By default during export elements are positioned **absolutely** using the **top**, **right**, **bottom**, or **left** properties and if selected **transforms** are used for centering. 

You can change the layout position using the position dropdown.  

<div align="center"><img src="https://735683391-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LWpp_0PwLnj_AXGL2u7%2F-MDXB0A9i819qV7u42TQ%2F-MDXIapQWW22Ew4SBfur%2Fimage.png?alt=media&#x26;token=0970682b-5c29-408a-99fc-802fd37ceb9d" alt=""></div>

{% hint style="info" %}
Changing this option to anything but default or absolute can break your page from what it looks like on the artboard. If you know what you are doing this is desirable.&#x20;
{% endhint %}

You can read more about these options in the position page:&#x20;

{% embed url="<https://developer.mozilla.org/en-US/docs/Web/CSS/position>" %}

You can also select the **none** option to prevent the **position** CSS property from being written to the elements style declaration.&#x20;

{% hint style="info" %}
There is another layout option for groups for [Row Layout](https://velara-3.gitbook.io/web-export/element-options/row-layout) and [Column Layout](https://velara-3.gitbook.io/web-export/element-options/column-layout) that position elements inside of the group.&#x20;
{% endhint %}