> For the complete documentation index, see [llms.txt](https://docs.realmacsoftware.com/elements-docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.realmacsoftware.com/elements-docs/using-elements/components/common-controls/layout.md). # Layout Layout controls how a component participates in the page layout. Use them to change positioning, offsets, stacking order, visibility, overflow, and stacking-context isolation. ### Position **Position** defaults to None. | Option | Behaviour | | -------- | ----------------------------------------------------------------------------------------------- | | None | Adds no positioning rule. | | Static | Keeps the component in normal document flow and ignores offsets. | | Relative | Keeps its original space while allowing offsets and positioned descendants. | | Absolute | Removes it from normal flow and positions it against the nearest positioned ancestor. | | Fixed | Removes it from normal flow and positions it against the viewport. | | Sticky | Behaves normally until it reaches an offset, then remains pinned within its scrolling ancestor. | See [Tailwind CSS Position](https://tailwindcss.com/docs/position) for the equivalent CSS behaviour. {% hint style="info" %} Sticky positioning needs at least one non-Auto offset, usually **Top**. It can also be prevented by an ancestor’s overflow or insufficient scrollable height. {% endhint %} ### Z-Index **Z-Index** controls stacking order and is not responsive. * **None** — Adds no z-index value. This is the default. * **Auto** — Lets the browser determine the stack order. * **Custom** — Reveals a number field, which defaults to 0 and accepts positive or negative values. See [Tailwind CSS Z-Index](https://tailwindcss.com/docs/z-index) for the equivalent CSS behaviour. {% embed url="" %} ### Top, Right, Bottom, and Left **Type** defaults to None. * **None** — Adds no offsets. * **Uniform** — Reveals one **Inset** value for all four sides. It defaults to 0. * **Individual** — Reveals separate **Top**, **Right**, **Bottom**, and **Left** values. Each defaults to 0. Offsets support responsive Theme Spacing or custom CSS values. They affect Relative, Absolute, Fixed, and Sticky positioning; Static ignores them. See [Tailwind CSS Top, Right, Bottom, and Left](https://tailwindcss.com/docs/top-right-bottom-left). {% embed url="" %} ### Display **Hidden** is off by default. Enable it at a breakpoint to remove the component from the rendered layout at that breakpoint and above until another responsive override changes it. **Visibility** defaults to Auto. * **Auto** — Adds no visibility rule. * **Visible** — Shows the component. * **Invisible** — Hides the component while preserving its layout space. See [Tailwind CSS Visibility](https://tailwindcss.com/docs/visibility). {% hint style="warning" %} Hidden and Invisible are different: Hidden removes the component from layout; Invisible leaves an empty space where it would have appeared. {% endhint %} {% embed url="" %} ### Overflow **Overflow** defaults to None. * **None** — Adds no overflow rule. * **Visible** — Allows content to extend beyond the component. * **Hidden** — Clips overflowing content without scrollbars. * **Scroll** — Always provides scrolling for overflowing content. * **Auto** — Adds scrollbars only when content overflows. See [Tailwind CSS Overflow](https://tailwindcss.com/docs/overflow). {% embed url="" %} ### Isolation **Isolation** defaults to None. * **None** — Adds no isolation rule. * **Isolate** — Creates a new stacking context so child z-index values remain within the component. * **Auto** — Lets the browser decide whether a stacking context is needed. See [Tailwind CSS Isolation](https://tailwindcss.com/docs/isolation). ### Flex and Grid Items Some components also provide **Flexbox and Grid** item controls. These settings apply only when the component is inside the matching parent: * **Grid Item** controls column, row, span, and placement. * **Flex Item** controls order, growth, shrink, basis, and self-alignment. Use the parent [Flex](/elements-docs/using-elements/components/layout-components/flex.md) or [Grid](/elements-docs/using-elements/components/layout-components/grid.md) controls for the overall layout, then use item controls only for exceptions. ## Layout UI in Elements
Layout controls for position, z-index, offsets, visibility, overflow, and isolation

The appearance may have changed since this screenshot, but the underlying controls remain the same.

--- # 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.realmacsoftware.com/elements-docs/using-elements/components/common-controls/layout.md?ask=&goal= ``` `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.