Position Utilities
NuvoUI's position utilities provide a powerful system for controlling element positioning, allowing you to precisely place elements within the document flow. These utilities help you create complex layouts, sticky elements, overlays, and more with minimal effort.
Overview
Position utilities control how elements are positioned in the document flow:
- Static: The default positioning (follows normal document flow)
- Relative: Creates a positioning context while maintaining the element's space
- Absolute: Positions relative to the nearest positioned ancestor
- Fixed: Positions relative to the viewport (stays in place during scrolling)
- Sticky: Toggles between relative and fixed positioning based on scroll position
Basic Usage
Apply positions using NuvoUI's utility classes:
Position Types
Control how elements are positioned in relation to the document flow:
| Class | Properties | Description |
|---|---|---|
.static | position: static; | Default position, follows normal document flow |
.relative | position: relative; | Positioned relative to normal position, creates positioning context |
.absolute | position: absolute; | Positioned relative to nearest positioned ancestor |
.fixed | position: fixed; | Positioned relative to viewport, stays in place when scrolling |
.sticky | position: sticky; z-index: 999; top: 0; | Toggles between relative and fixed based on scroll position |
.absolute-center | Complex transform | Centers element with absolute positioning using transforms |
Placement Utilities
Control element positioning with top, right, bottom, and left placement utilities:
| Class Pattern | Description | Example Values |
|---|---|---|
.top-{value} | Sets the top position | 0, 1, 2, 4, 8, 16, 32, 50p (percent), etc. |
.right-{value} | Sets the right position | 0, 1, 2, 4, 8, 16, 32, 50p (percent), etc. |
.bottom-{value} | Sets the bottom position | 0, 1, 2, 4, 8, 16, 32, 50p (percent), etc. |
.left-{value} | Sets the left position | 0, 1, 2, 4, 8, 16, 32, 50p (percent), etc. |
Percentage-Based Placement
Use percentage-based placement for proportional positioning:
| Class | Value | Description |
|---|---|---|
.top-25p, .left-25p, etc. | 25% | Quarter position from edge |
.top-33p, .left-33p, etc. | 33.333% | One-third position from edge |
.top-50p, .left-50p, etc. | 50% | Centered on axis |
.top-66p, .left-66p, etc. | 66.667% | Two-thirds position from edge |
.top-75p, .left-75p, etc. | 75% | Three-quarters position from edge |
.top-100p, .left-100p, etc. | 100% | Full position from edge |
Responsive Positioning
Apply positions conditionally at different breakpoints using the @breakpoint suffix:
Common UI Patterns
Badge Example
Modal Overlay
Sticky Header Example
SCSS Mixins
Use NuvoUI's position mixins directly in your SCSS for more control:
Position Type Mixins
| Mixin | Description | Parameters |
|---|---|---|
@include static() | Sets position to static (default flow) | None |
@include relative() | Sets position to relative | None |
@include absolute() | Sets position to absolute | None |
@include fixed() | Sets position to fixed | None |
@include sticky() | Sets position to sticky with top: 0 | None |
@include absolute-center() | Centers element absolutely with transforms | None |
Placement Mixins
| Mixin | Description | Parameters |
|---|---|---|
@include top($value) | Sets the top position | $value: Any valid CSS value (px, rem, %, etc.) |
@include right($value) | Sets the right position | $value: Any valid CSS value (px, rem, %, etc.) |
@include bottom($value) | Sets the bottom position | $value: Any valid CSS value (px, rem, %, etc.) |
@include left($value) | Sets the left position | $value: Any valid CSS value (px, rem, %, etc.) |
Advanced Positioning Techniques
Responsive Positioning with Mixins
Fixed Elements Positioning
Absolute Positioning for UI Elements
Best Practices
When to Use Different Position Values
- Static: Default flow - use for most elements
- Relative:
- To create a positioning context for absolute children
- To make subtle position adjustments without affecting layout
- Absolute:
- For UI elements that need to be precisely placed (badges, tooltips)
- For overlays within a specific container
- When an element needs to be removed from document flow
- Fixed:
- For elements that should stay in place during scrolling (navigation bars)
- For overlays that cover the entire viewport (modals)
- For floating action buttons and persistent UI elements
- Sticky:
- For elements that should stick to viewport edges during scrolling
- For section headers in long content
- For navigation that appears after scrolling past a certain point
Performance Considerations
- Fixed and sticky elements can cause layout repaints when scrolling
- Consider using
will-change: transformfor smoother performance - Too many fixed or absolute elements can make the UI harder to maintain
- Test scrolling performance, especially on mobile devices
Accessibility
- Ensure fixed elements don't obscure important content
- Position focus indicators appropriately for absolute/fixed elements
- Make sure modals can be closed with keyboard navigation
- Test with screen readers to ensure positioned content is accessible
Responsive Design
- Use different position strategies at different breakpoints
- Consider mobile scrolling behavior when using fixed headers/footers
- Test sticky elements on various screen sizes
- Be mindful of viewport heights on mobile when positioning fixed elements
Common Pitfalls
- Forgetting to set a positioning context (forgetting
position: relativeon parent) - Not accounting for z-index stacking contexts
- Overflow issues with absolutely positioned elements
- Fixed elements causing layout issues on mobile, especially when keyboard appears