## Affix  
Use the Affix component to show content at any fixed positon inside your app.  
Category: Overlay  

### Simple Example

Look at the bottom right!

```python
import dash_mantine_components as dmc

component = dmc.Affix(
    dmc.Button("I'm in an Affix Component"), position={"bottom": 20, "right": 20}
)
```
### Position prop
The `position` prop controls the affix position on the screen. By default, the component is positioned at `{ bottom: 0, right: 0 }`.  

Accepted Keys:
- `top` (MantineSize | str | number) – Distance from the top.  
- `left`(MantineSize | str | number) – Distance from the left.  
- `bottom`(MantineSize | str | number) – Distance from the bottom.  
- `right` (MantineSize | str | number) – Distance from the right.  

Accepted Value Types:
1. MantineSize (`'xs' | 'sm' | 'md' | 'lg' | 'xl'`) – Uses predefined spacing values.  
2. String (CSS units) (e.g., `"10px"`, `"5rem"`, `"50%"`) – Allows precise control using CSS units.  
3. Number (e.g., `10`, `50`) – Treated as pixel values (`px`).  


Example:
```python
import dash_mantine_components as dmc

dmc.Affix(
    dmc.Button("Floating Button"),
    position={"bottom": "20px", "right": "lg"} 
)
```


### Styles API


This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.


#### Affix selectors

| Selector | Static selector | Description |
|----------|----------------|-------------|
| root     | .mantine-Affix-root | Root element |

#### Affix CSS variables

| Selector | Variable | Description |
|----------|----------|-------------|
| root     | --affix-z-index  | Controls `z-index` property |
| root     | --affix-top      | Controls `top` property |
| root     | --affix-bottom   | Controls `bottom` property |
| root     | --affix-left     | Controls `left` property |
| root     | --affix-right    | Controls `right` property |



### Keyword Arguments
#### Affix

- children (a list of or a singular dash component, string or number; optional)

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- position (dict; optional):
    Affix position on screen @,default,`{ bottom: 0, right: 0 }`.

    `position` is a dict with keys:

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.

- withinPortal (boolean; optional):
    Determines whether the component is rendered within `Portal`
    @,default,`True`.

- zIndex (optional):
    Root element `z-index` property @,default,`200`.