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).

Centered content

Code

<div style="position: relative; height: 200px;"> <layout-imposter> <div>Centered content</div> </layout-imposter> </div>

Position Variants

The data-position attribute controls placement within the container.

Edge Positions

Top Bottom Start End
<layout-imposter data-position="top" data-margin="s">...</layout-imposter> <layout-imposter data-position="bottom" data-margin="s">...</layout-imposter> <layout-imposter data-position="start" data-margin="s">...</layout-imposter> <layout-imposter data-position="end" data-margin="s">...</layout-imposter>

Corner Positions

Top Start Top End Bottom Start Bottom End
<layout-imposter data-position="top-start" data-margin="s">...</layout-imposter> <layout-imposter data-position="top-end" data-margin="s">...</layout-imposter> <layout-imposter data-position="bottom-start" data-margin="s">...</layout-imposter> <layout-imposter data-position="bottom-end" data-margin="s">...</layout-imposter>

Usage Examples

Notification Badge

3
<div style="position: relative; display: inline-block;"> <button type="button">Notifications</button> <layout-imposter data-position="top-end"> <span class="badge">3</span> </layout-imposter> </div>

Image Overlay

Photo caption
<div style="position: relative;"> <img src="image.jpg" alt="Photo" /> <layout-imposter data-position="bottom-start" data-margin="m"> <span class="caption">Photo caption</span> </layout-imposter> </div>

Card with Status Badge

Project Alpha

Last updated yesterday

 Active
<div style="position: relative;"> <layout-card data-variant="outlined" data-padding="l"> <strong>Project Alpha</strong> <p>Last updated yesterday</p> </layout-card> <layout-imposter data-position="top-end" data-margin="m"> <span class="status-badge">Active</span> </layout-imposter> </div>

Loading Overlay

Loading...

CSS Implementation

layout-imposter { position: var(--_position, absolute); inset-block-start: var(--_inset-block, 50%); inset-inline-start: var(--_inset-inline, 50%); translate: var(--_translate, -50% -50%); } /* Fixed positioning */ layout-imposter[data-layout-fixed] { --_position: fixed; } /* Position presets */ layout-imposter[data-position="top"] { --_inset-block: var(--_margin, 0); --_inset-inline: 50%; --_translate: -50% 0; } layout-imposter[data-position="bottom-end"] { --_inset-block: auto; inset-block-end: var(--_margin, 0); --_inset-inline: auto; inset-inline-end: var(--_margin, 0); --_translate: 0 0; } /* Contain within viewport */ layout-imposter[data-contain] { max-inline-size: calc(100dvw - var(--_margin, 0) * 2); max-block-size: calc(100dvh - var(--_margin, 0) * 2); overflow: auto; }

Related Elements