Absolute

The Absolute component is a structural element designed to wrap content and position it precisely, independent of the normal document structure. It is ideal for creating dynamic notifications, pop-ups, overlays, moving nameplates, and other UI elements that require precise placement.

By default, the Absolute component positions its content relative to the closest Relative component parent. If no Relative component is present, it positions relative to the body.

Usage

The primary use case for the Absolute component is to position nested content precisely within a document. The component lets you define offsets using the top, left, right, and bottom properties.

import Relative from '@components/Layout/Relative/Relative';
import Absolute from '@components/Layout/Absolute/Absolute';
import Block from '@components/Layout/Block/Block';

const App = () => {
    return (
        <Relative>
            <Absolute top="50px" right="50px">
                <Block>Content with top and right offset by 50px</Block>
            </Absolute>
        </Relative>
    );
};

export default App;

API

Props

Prop Name	Type	Default	Description
style	JSX.CSSProperties	{}	Inline styles to apply directly to the component’s root element.
class	string	""	Additional CSS classes to apply to the component
ref	HTMLDivElement	undefined	Retrieves the component’s DOM element and assigns it to a variable.
top, left, right, bottom	string	""	Specify the position offset of the Absolute component. It accepts any valid css unit value
center	boolean | 'x' | 'y'	undefined	Specifies whether to center the component within its closest relatively positioned ancestor (usually a Relative component). Use a boolean to center on both axes, or specify 'x' or 'y' for a single axis.
onAction	Record<string, (scope?: string, ...args: any[]) => void>	undefined	Allows you to add custom navigation action handlers to the component. See the Navigation component documentation for details.
anchor	string | HTMLElement	undefined	Links navigation to another element. When the anchor element is focused, this component’s actions will execute. Can be a CSS selector or HTMLElement.

Guide

Positioning the component

The primary purpose of the Absolute component is to position content precisely. To achieve optimal control, it is recommended to nest the Absolute component within a Relative component. This allows the Relative component to act as a bounding box, ensuring the Absolute component is positioned relative to it rather than the document or screen.

Example

import Relative from '@components/Layout/Relative/Relative';
import Absolute from '@components/Layout/Absolute/Absolute';
import Block from '@components/Layout/Block/Block';

const App = () => {
    return (
        <Relative style={{ width: '300px', height: '200px', border: '1px solid black' }}>
            <Block>Normally positioned content</Block>
            <Absolute top="20px" left="40px">
                This content is positioned 20px from the top and 40px from the left of the Relative container.
            </Absolute>
            <Absolute bottom="0" right="0">
                Positioned at the bottom right corner of the Relative container.
            </Absolute>
        </Relative>
    );
};

export default App;

Accessing the HTML element

To access the HTML DOM element of the Absolute component.

1. Declare a variable to hold the ref but don’t initialize it with a value
2. The declared value should have a type of HTMLDivElement.
3. Set the declared variable as the value of the ref prop of the Absolute component

Example

import Relative from '@components/Layout/Relative/Relative';
import Absolute from '@components/Layout/Absolute/Absolute';
import Block from '@components/Layout/Block/Block';

const App = () => {
    let absoluteRef!: HTMLDivElement;

    return (
        <Relative>
            <Absolute ref={absoluteRef} top="50px" right="50px">
                <Block>Content with top and right offset by 50px</Block>
            </Absolute>
        </Relative>
    );
};

export default App;

Now you can access the HTML element of the component with absoluteRef and make modifications to it if needed.

Quickly centering an element within a container 3.0.0

The center prop easily centers an Absolute component within its closest relatively positioned ancestor. You can center it on both axes or restrict it to a single axis.

This is particularly useful for quickly centering elements (like text) inside a container without manually calculating offsets.

For example, to overlay text in the center of a Progress.Bar:

1. Wrap the Progress.Bar in a Relative component to establish a positioning context.
2. Place the Absolute component as a sibling to the Progress.Bar.
3. Set the center prop on the Absolute component to true (both axes), or specify 'x' or 'y' for a single axis.

<Relative style={{ width: '100%', height: '2rem' }}>
    <Progress.Bar progress={80} style={{ width: '100%', height: '100%' }} />
    <Absolute center>80%</Absolute>
</Relative>