# Absolute

```ts
import { Absolute, Rectangle } from "@pibbl/core";
```

`Absolute` places each direct child from its local `left`, `top`, and declared
box style. Its props are [`AbsoluteProps`](/reference/types/elements-components/#absoluteprops); its local style is [`AbsoluteStyle`](/reference/types/layout/#absolutestyle).
Children are recursive [`PibblNode`](/reference/types/elements-components/#pibblnode) values. Allocation is finite and does not
measure or retain drawing commands.

```tsx
<Absolute style={{ width: 320, height: 180 }}>
  <Rectangle
    style={{ left: 24, top: 20, width: 120, height: 60, fill: "#2563eb" }}
  />
</Absolute>
```

Compare it with the [Absolute and Overlay live example](/playground/#/examples/layout/absolute-and-overlay).

## API details from source

<span id="api-Absolute"></span>

Describes absolute layout for JSX or createElement authoring.

```ts
Absolute: PibblPrimitiveComponent<AbsoluteProps, PrimitiveInput<AbsoluteProps, AbsoluteStyle>>
```

Related API: [Absolute](/reference/components/absolute/), [PibblPrimitiveComponent](/reference/types/elements-components/#pibblprimitivecomponent), [AbsoluteProps](/reference/types/elements-components/#absoluteprops), [PrimitiveInput](/reference/types/styles/#primitiveinput), [AbsoluteStyle](/reference/types/layout/#absolutestyle).

### Parameters

- **`props`** — Authored component inputs, supplied through JSX or createElement. See the linked
props and style types.

### Throws

When called directly; Pibbl mounts this component through JSX or createElement.

### See also

[AbsoluteProps](/reference/types/elements-components/#absoluteprops)

[AbsoluteStyle](/reference/types/layout/#absolutestyle)

[View source — packages/core/src/lib/layout/absolute.ts:126](/source/packages/core/src/lib/layout/absolute-ts/#L126)

## Implementation guidance for agents

Read the [Drawing, layout, and effects companion](/agents/topics/layout/) for ownership, adaptation, failure modes, and verification. [Agent start](/agents/) provides the version-selection workflow.

## Complete minimal examples

- [Absolute and overlay layout](/minimal-examples/layout/absolute-overlay/): Position a block absolutely and center content within an overlay. [Plain source](/minimal/layout/absolute-overlay.tsx)
## Documentation version

Documentation built with @pibbl/core 0.0.2, revision 272a94a. ALPHA — NOT FOR PRODUCTION USE.