# Overlay

## Overview

A flexible overlay container component that allows positioning child blocks in fixed positions on the screen corners. Supports both app and theme blocks with customizable corner positioning and z-index control. Ideal for chat widgets, promotional banners, or notification elements.

## Common use cases

* Use for floating/fixed position blocks on the screen like chat widgets, promotional banners, or notification elements
* Configure position and spacing using the block settings
* Control visibility for different device sizes

## Compatible blocks

The following blocks can be nested within this block:

* All theme blocks
* App blocks

## Block settings

### General

| Setting                | Description                    | Options                   |
| ---------------------- | ------------------------------ | ------------------------- |
| Show advanced settings | Reveals margin, and visibility | Checkbox (default: false) |

### Spacing

| Setting        | Description                             | Options                                                                      |
| -------------- | --------------------------------------- | ---------------------------------------------------------------------------- |
| Enable padding | Adds padding around the overlay content | Checkbox (default: true)                                                     |
| Gap size       | Controls spacing between child blocks   | <p>• None<br>• Default (default)<br>• XS<br>• SM<br>• MD<br>• LG<br>• XL</p> |

### Color

| Setting      | Description                             | Options                                                                                                                                                                                    |
| ------------ | --------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| Color scheme | Controls the background and text colors | <p>• Body<br>• Neutral<br>• Accent 1 (default)<br>• Accent 2<br>• Accent 3<br>• Shade 1<br>• Shade 2<br>• Shade 3<br>• Primary<br>• Secondary<br>• Tertiary<br>• Blur<br>• Transparent</p> |
| Color border | Controls the border color               | <p>• Body<br>• Subtle (default)<br>• Strong<br>• Primary<br>• Secondary<br>• Tertiary<br>• None<br><br>Visible when border position is not blank</p>                                       |

### Style

| Setting         | Description                   | Options                                                                                                            |
| --------------- | ----------------------------- | ------------------------------------------------------------------------------------------------------------------ |
| Border position | Controls where borders appear | <p>• None (default)<br>• Top<br>• Bottom<br>• Left<br>• Right<br>• Top and bottom<br>• Left and right<br>• All</p> |

### Layout

| Setting             | Description                                       | Options                                                                                                                                                     |
| ------------------- | ------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Rotation            | Rotates the overlay content                       | <p>• None (default)<br>• Right 90°<br>• Left 90°</p>                                                                                                        |
| Horizontal position | Controls horizontal positioning of the overlay    | <p>• Left (default)<br>• Center<br>• Right</p>                                                                                                              |
| Vertical position   | Controls vertical position as percentage from top | 0 - 100 % (default: 100)                                                                                                                                    |
| Margin              | Outer margin around the overlay                   | <p>• Default<br>• Narrow<br>• Standard<br>• Wide<br>• Full<br>• None (default)</p><p><br><br>Visible when <strong>Show advanced settings</strong> is on</p> |

### Display

| Setting    | Description                        | Options                                                                                                                            |
| ---------- | ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| Visibility | Controls when the block is visible | <p>• All (default)<br>• Mobile only<br>• Desktop only</p><p><br><br>Visible when <strong>Show advanced settings</strong> is on</p> |


---

# 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://help.brickspacelab.com/slab/content/blocks/layout/fixed.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.