Common CSS (Spacing & Position Utilities)

FrankUI provides utility helper classes for rapid layout adjustments, positioning elements, and spacing. These utilities form the foundation for more advanced responsive interfaces.

Demo: This element has class fixed-top. It is fixed at the top of the viewport.

Demo: This element has class fixed-bottom. It is fixed at the bottom of the viewport.

Positioning Classes

Use position utilities to layout elements, build sticky headers, overlay actions, or create fixed components.

Live Position Demo

Select a class to position the target box (blue) within the viewport container (gray dotted border, relative layout).

Select Position Class

Scroll inside this box to test sticky positioning.

Target Element Box

Additional sandbox content representing height...

Base Utilities Reference

Class	Applied Style	Usage Notes
.pos-static	position: static !important;	Default normal document flow.
.pos-relative	position: relative !important;	Positioned relative to its normal flow; acts as anchor for absolute elements.
.pos-absolute	position: absolute !important;	Positioned relative to the nearest positioned ancestor.
.pos-fixed	position: fixed !important;	Positioned relative to the viewport. Remains in place on scroll.
.pos-sticky	position: sticky !important; top: 0 !important; align-self: flex-start !important;	Behaves relative until scrolling reaches a threshold, then sticks.
.fixed-top	position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important;	Affixes an element to the very top of the window, spanning full width.
.fixed-bottom	position: fixed !important; bottom: 0 !important; left: 0 !important; right: 0 !important;	Affixes an element to the very bottom of the window, spanning full width.

Best Practices

Creating Positioning Contexts: Use .pos-relative to create a positioning context for absolutely positioned child elements.
Fixed Headers and Footers: When using .fixed-top or .fixed-bottom, add appropriate padding to the body or main content to prevent content from being hidden behind these fixed elements.
Sticky Positioning: Be aware that .pos-sticky requires a scrollable container and may not work in all browsers. Always test thoroughly.
Responsive Positioning: Use responsive variants to change positioning behavior based on screen size, which is particularly useful for navigation elements that might be fixed on desktop but static on mobile.
Combining with Other Utilities: These position utilities work well with other framework utilities:
- Use with spacing utilities to add padding or margin
- Use with z-index utilities to control stacking order
- Use with width and height utilities to control dimensions