layout-imposter

A positioning helper for overlays, modals, and fixed UI elements. Uses CSS transforms for centering without requiring JavaScript calculations.

Attributes

Attribute Values Default Description
data-position center, top, bottom, start, end, top-start, top-end, bottom-start, bottom-end center Where to position the element within its container
data-layout-fixed boolean - Uses fixed positioning instead of absolute
data-margin s, m, l, xl - Margin from edges when not centered
data-contain boolean - Constrains size to viewport with overflow scroll

Basic Usage

The imposter positions itself within a positioned ancestor (or viewport when fixed).

Position Variants

The data-position attribute controls placement within the container.

Edge Positions

Corner Positions

Usage Examples

Notification Badge

Image Overlay

Card with Status Badge

Loading Overlay

Related
↑