Position
Positioning helpers for pinning and centering elements: FixedTop /
FixedBottom pin to the viewport, StickyTop /
StickyBottom stick while scrolling, and TranslateMiddle handles
the classic transform-based absolute-centering pattern.
Import
import {
FixedTop,
FixedBottom,
StickyTop,
StickyBottom,
TranslateMiddle,
} from '@metatoy/bootstrap-styled';Absolute centering
TranslateMiddle applies transform: translate(-50%, -50%) so an element is centered on
its own reference point. Combine absolute with top / start / bottom / end
(each 0, 50, or 100) to reproduce Bootstrap’s
.position-absolute .top-0 .start-0 .translate-middle pattern — perfect for corner badges
and dead-centering inside a positioned parent.
Use axis="x" or axis="y" to center on a single axis (.translate-middle-x /
-y).
Fixed & sticky
The Fixed* and Sticky* helpers are viewport-bound: rendered live in this page they
would cover the content, so they are shown here as code. Each emits its Bootstrap class and
inlines the exact rule, so it works standalone.
FixedTop / FixedBottom pin to the viewport edge with position: fixed and
z-index: 1030:
<FixedTop style={{ background: '#212529', color: '#fff', padding: '0.5rem' }}>
Pinned to the top of the viewport
</FixedTop>
<FixedBottom style={{ background: '#212529', color: '#fff', padding: '0.5rem' }}>
Pinned to the bottom of the viewport
</FixedBottom>StickyTop / StickyBottom use position: sticky with z-index: 1020, sticking within
their scroll container. Pass breakpoint to make the stickiness apply only at or above a
grid breakpoint (.sticky-{bp}-top):
<StickyTop style={{ background: '#0d6efd', color: '#fff', padding: '0.5rem' }}>
Sticky header
</StickyTop>
{/* Sticky only at >= lg */}
<StickyTop breakpoint="lg">Sticky from lg up</StickyTop>Props
TranslateMiddle — the centering helper:
| Prop | Type | Default | Description |
|---|---|---|---|
| axis | 'both' | 'x' | 'y' | — | Which axis to center on. Defaults to `'both'`. |
| absolute | boolean | — | Add `.position-absolute` (for the absolute-centering pattern). |
| top | Edge | — | `.top-{0|50|100}` edge offset. |
| start | Edge | — | `.start-{0|50|100}` (left) edge offset. |
| bottom | Edge | — | `.bottom-{0|50|100}` edge offset. |
| end | Edge | — | `.end-{0|50|100}` (right) edge offset. |
| as | React.ElementType | — | — |
FixedTop, FixedBottom, StickyTop, and StickyBottom share the base positioning
props (an as override plus all native attributes and a ref):
| Prop | Type | Default | Description |
|---|---|---|---|
| as | React.ElementType | — | — |
The Sticky* helpers additionally accept a breakpoint prop
('sm' | 'md' | 'lg' | 'xl' | 'xxl') that scopes the sticky behavior to a
min-width media query, matching Bootstrap’s .sticky-{bp}-top / -bottom classes.
Theming
These are structural helpers — position, offsets, transforms, and the two z-index layers
(1030 fixed, 1020 sticky) are transcribed verbatim from Bootstrap and inlined, so there
are no color tokens to theme. Adjust placement with the top / start / bottom / end
props or your own style.
Accessibility
Fixed and sticky elements overlay content, so ensure they don’t obscure focusable
controls or the target of an in-page anchor. TranslateMiddle only affects visual
placement and adds no semantics — the reading and tab order follow the DOM, so keep the
markup order logical regardless of where an element visually lands.
Explore in Ladle
Browse the sticky and absolute-centering demos in the interactive component gallery: Position · Ladle ↗.