# Absolute and overlay layout
Position a block absolutely and center content within an overlay.

## APIs demonstrated

- [Absolute](/reference/components/absolute/) from `@pibbl/core`
- [AbsoluteProps](/reference/types/elements-components/) from `@pibbl/core`
- [AbsoluteStyle](/reference/types/layout/) from `@pibbl/core`
- [Overlay](/reference/components/overlay/) from `@pibbl/core`
- [OverlayProps](/reference/types/elements-components/) from `@pibbl/core`
- [OverlayStyle](/reference/types/layout/) from `@pibbl/core`

## Complete example

[Plain source](/minimal/layout/absolute-overlay.tsx). Run as a browser module after the document body exists. TSX uses `jsx: "react-jsx"` and `jsxImportSource: "@pibbl/core"`.

```tsx
import {
  Absolute,
  Overlay,
  Rectangle,
  Text,
  pibbl,
  type AbsoluteProps,
  type AbsoluteStyle,
  type OverlayProps,
  type OverlayStyle,
} from "@pibbl/core";

const absoluteStyle: AbsoluteStyle = { width: 320, height: 220 };
const overlayStyle: OverlayStyle = {
  left: 145,
  top: 55,
  width: 145,
  height: 100,
  alignItems: "center",
  justifyItems: "center",
};
const overlayProps: OverlayProps = {
  children: (
    <>
      <Rectangle style={{ width: 145, height: 100, fill: "#0f766e" }} />
      <Text
        style={{
          width: 80,
          height: 20,
          font: "bold 15px sans-serif",
          fill: "#fff",
        }}
      >
        Overlay
      </Text>
    </>
  ),
};
const absoluteProps: AbsoluteProps = {
  children: (
    <>
      <Rectangle
        style={{ left: 20, top: 25, width: 125, height: 145, fill: "#f97316" }}
      />
      <Overlay {...overlayProps} style={overlayStyle} />
    </>
  ),
};
const canvas = document.createElement("canvas");
canvas.width = 320;
canvas.height = 220;
document.body.append(canvas);
const app = pibbl(canvas, <Absolute {...absoluteProps} style={absoluteStyle} />);
window.addEventListener("pagehide", () => app.dispose(), { once: true });

```

## Usage notes

- Creates its own canvas and disposes the Pibbl mount on pagehide.

## Documentation version

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