# Position

The Position property defines how a block should be positioned.

{% hint style="info" %}
By default, elements are positioned according to their order of arrival in the HTML file.&#x20;
{% endhint %}

The first elements encountered are placed at the top of the page and the following ones below.&#x20;

## Location

The Position property is used to set the location of an element on the page, independently of its position in the HTML file: the element can therefore be found anywhere on the page.&#x20;

The element is then positioned (static, absolute, relative, fixed, sticky)​​.

***Static*** The blocks are positioned one after the other, according to their order in the HTML document and natural flow of the page. The block does not react to the positioning properties.

***Absolute*** The block is positioned in relation to the closest positioned ancestor. If there is no other element positioned, the reference will be the body. The block is positioned and reacts to the positioning properties.

***Relative*** The blocks are positioned one after the other, according to their order in the HTML document and natural flow of the page. The block is positioned and reacts to the positioning properties.

***Fixed*** The block is positioned according to the viewport. The element will therefore not scroll with the page and will be *fixed*. The block is positioned and reacts to the positioning properties.

***Sticky*** The block scrolls with the page as long as it remains visible. The block is positioned and reacts to the positioning properties.

* Select a block.
* Open the Block Inspector.
* Open the Design tab.
* Open the Layout tab.
* Open the Position tab.
* Select the appropriate location option (static, absolute, relative, fixed, sticky)​​.

## Values

{% hint style="warning" %}
Available for all positions except static.
{% endhint %}

You can specify the top, right, bottom and left values to  allow you to define the location of an element.

* Select a block.
* Open the block inspector.
* Open the design tab.
* Open the layout tab.
* Open the position tab.
* Enter the desired values (Top, Right, Bottom, Left).
* Click dot to reset.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.cwicly.com/design/layout/position.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
