> For the complete documentation index, see [llms.txt](https://docs.usestencil.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.usestencil.com/using-stencil/template-editor-1/anchoring-element.md).

# Anchoring Element

## Dynamically Positioning an Element

Sometimes there is a time that you need text to be dynamically positioned next to certain element. For example, in our template below we want the price "$399" to be anchored next to "per pax" text.

Given that the price will change based on input from API, it is hard to position this statically without causing overlap especially if the price text can be very long.

![](/files/-MettjIEW5Oq789iHET5)

## Anchor To feature

To solve this problem, we added Anchor To field where you can select layer that can be set as the anchor. 

This option can be found in Textbox's settings,

![More options will pop out when anchor is selected](/files/-Metxd5SNIYtrpSJG6HP)

| Field     | Description                                                 |
| --------- | ----------------------------------------------------------- |
| Anchor To | Layer that you want your current text box to be anchored to |
| Anchor X  | Horizontal positioning relative to the anchor               |
| Anchor Y  | Vertical positioning relative to the anchor                 |
| Offset X  | Horizontal offset to be applied                             |
| Offset Y  | Vertical offset to be applied                               |

Offset is useful to fine tune the position to the pixel.

{% hint style="info" %}
Currently this option is only available for Text but you can anchor it to any other elements. It will be available on other components soon.
{% endhint %}

## Understanding Anchor Positioning

### Anchor X - Horizontal Positioning

![](/files/-Meu2V_ZBq5Gtshh0e2Z)

### Anchor Y - Vertical Positioning

![](/files/-Meu3vx2yLAIJGOhd4GB)

## Testing Your Design

To make sure your design will work well with your expected inputs, you can try to generate several images through Console. Alternatively, you could also type in the text to ensure the positions are correct.

{% hint style="success" %}
**Pro tips**

Anchored element position is fixed. If you are trying to anchor anything that is close to the edge, use the element nearest to the edge as the anchor. Otherwise, your text will be out of the canvas area.
{% endhint %}

![ ✅ Use per pax as the anchor of the price. The price can expand while per pax is fixed](/files/-MeuFnyPWwJdMsiOyMzj)

![❌ Bad choice of anchor can cause item to overflow unexpectedly](/files/-MeuGBNE6NvOsJVKT76A)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://docs.usestencil.com/using-stencil/template-editor-1/anchoring-element.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.