Positioned
Positioned controls the exact placement of a child within a Stack. It must be used as a direct child of Stack and requires at least one positioning property: top, bottom, left, or right.

Tsx

import { Stack, Positioned } from '@dynshift/layr';

Tsx

Preview

NOTE: Previews are not depiction of actual website output.
1. Basic Positioning
1a. Corner Positioning
Place elements at specific corners.

Tsx

Preview

NOTE: Previews are not depiction of actual website output.
2. Edge Positioning
Stretch elements along edges using two opposing anchors.

Tsx

Preview

NOTE: Previews are not depiction of actual website output.
3. Explicit Dimensions
3a. Fixed Width and Height
Control exact size using width and height props.

Tsx

Preview

NOTE: Previews are not depiction of actual website output.
3b. Responsive Sizing
Use percentage values for responsive layouts.

Tsx

Preview

NOTE: Previews are not depiction of actual website output.
4. Common Patterns
4a. Overlay Banner
Full-width banner at the bottom of an image.

Tsx

Preview

NOTE: Previews are not depiction of actual website output.
4b. Badge Overlay
Corner badge on images.

Tsx

Preview

NOTE: Previews are not depiction of actual website output.
4c. Floating Action Button
Bottom-right floating action button.

Tsx

Preview

NOTE: Previews are not depiction of actual website output.
4d. Close Button
Top-right close icon for modals.

Tsx

Preview

NOTE: Previews are not depiction of actual website output.
5. API Reference
5a. PositionedProps
PropTypeDefaultDescription
childrenReactNodeChild widget to position
topnumber | stringDistance from top edge
bottomnumber | stringDistance from bottom edge
leftnumber | stringDistance from left edge (LTR)
rightnumber | stringDistance from right edge (LTR)
widthnumber | stringExplicit width
heightnumber | stringExplicit height
classNamestring''Additional CSS classes
styleCSSProperties{}Custom inline styles
Note: At least one of top, bottom, left, or right must be specified.