> For the complete documentation index, see [llms.txt](https://docs.bravostudio.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.bravostudio.app/bravo-tags/containers/layer-sticky-element.md).

# Layer (sticky element)

A container that fixes its position on-screen and does not scroll with the rest of the screen.

## 👉 **The Tag** <a href="#the-tag" id="the-tag"></a>

This tag creates an element that fixes its position on-screen and does not scroll with the rest of the screen.

**📍 Where to add the tag:** A second-level container.

```
[layer]
```

{% hint style="warning" %}
Layers are positioned considering the full screen dimensions. They are not supported in modals and pop ups.&#x20;
{% endhint %}

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXpqEanvOhm8vMtIH8i%2F-Mg5PnRQOyGW_wS4ulHf%2F-Mg5QLVocVaNmZ8FCF2p%2Flayer-final1.gif?alt=media\&token=d1860116-02ae-470e-bb00-e667c1e6b890)

## 🏷️ **How to add the tag** <a href="#how-to-add-the-tag" id="how-to-add-the-tag"></a>

1. Create your layer element design.

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXpqEanvOhm8vMtIH8i%2F-Mg5PnRQOyGW_wS4ulHf%2F-Mg5S2boSocBMArlBYpG%2Flayer-figma1.png?alt=media\&token=b1b03056-be55-4f43-b671-0734fbffcc39)

2\. **Wrap it in a container.** Unlike normal containers, layer elements don't need to be the full width of the screen.

{% hint style="warning" %}
Make sure it's not inside another container. It should be a 2nd-level layer.
{% endhint %}

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXpqEanvOhm8vMtIH8i%2F-Mg5PnRQOyGW_wS4ulHf%2F-Mg5TAHeTjmMaouLmq5n%2Flayer-figma2.gif?alt=media\&token=7385b520-1bc2-49d4-8fab-4ff636e349ef)

3\. **Paste** the tag into the layer name of this container.

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXpqEanvOhm8vMtIH8i%2F-Mg5PnRQOyGW_wS4ulHf%2F-Mg5TZ_0AzlQ0JCzLZzn%2Flayer-figma3.png?alt=media\&token=4d49252d-e99e-4b02-a971-2f08c04ef970)

4\. **Place it in the desired position** where you want it to stay fixed in the "default screen area." The default screen area is one app page at 100%. **If you have a splash screen in your design file, Bravo will use it as the default screen size**. If you place the layer element outside of this area (for example on a long page), it will not appear.

![For ex: I want the blue button to stick at the bottom of the screen, but instead of placing it at the bottom of my actual design, I place it near where the device screen would cut off.](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXpqEanvOhm8vMtIH8i%2F-Mg5PnRQOyGW_wS4ulHf%2F-Mg5TrF61eiTZ3oK4cpu%2FScreenshot_2020-09-30_at_16.49.20.png?alt=media\&token=b2a5af4c-3ffb-4067-b77c-be0730b7b9fb)

5\. Make sure the layer is not inside another container. It should be its own 2nd-level frame.

![](https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-MXpqEanvOhm8vMtIH8i%2F-Mg5PnRQOyGW_wS4ulHf%2F-Mg5U-sbr6IfSXa4B1Od%2Flayer-figma5.png?alt=media\&token=7060a186-5da2-4123-9298-a340ddf906ba)

6\. Import to Bravo & preview on Bravo Vision 🚀

## 💾 Example files <a href="#example-files" id="example-files"></a>

Duplicate the files below to see how to set it up!

{% embed url="<https://www.figma.com/community/file/973892292868502990>" %}

{% file src="/files/-Mg5UHAwVF7HJJ9IivHt" %}
Bravo Sample - Sticky Layer.xd
{% endfile %}


---

# 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 by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://docs.bravostudio.app/bravo-tags/containers/layer-sticky-element.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

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.
