Positioning Utilities

Control element positioning with utilities for position types, coordinates, and z-index layering.

Position Types

Use position utilities to control how elements are positioned in the document flow.

Relative Positioning

Position an element relative to its normal position. The element remains in the document flow, and other elements are not affected.

.focus-position-relative
top: 20px; left: 20px;

HTML

<div class="focus-position-relative" style="top: 20px; left: 20px;">
  Relatively positioned
</div>

Absolute Positioning

Position an element absolutely relative to its nearest positioned ancestor. The element is removed from the document flow.

This container has position: relative

Top Right

Bottom Left

Bottom Right

HTML

<div class="focus-position-relative">
  <div class="focus-position-absolute focus-top-0 focus-right-0">
    Top Right
  </div>
  <div class="focus-position-absolute focus-bottom-0 focus-left-0">
    Bottom Left
  </div>
  <div class="focus-position-absolute focus-bottom-0 focus-right-0">
    Bottom Right
  </div>
</div>

Fixed Positioning

Position an element relative to the viewport. It stays in the same place even when scrolling.

Note: Fixed elements are positioned relative to the viewport. This example shows the concept, but the element is contained within this demo area.

.focus-position-fixed
(Simulated - would stick to viewport)

HTML

<div class="focus-position-fixed focus-top-0 focus-right-0">
  Fixed to viewport
</div>

Sticky Positioning

An element toggles between relative and fixed positioning based on scroll position. It sticks when you scroll past it.

This is scrollable content. The header above uses .focus-position-sticky with top: 0.

Keep scrolling to see the sticky effect...

The header will stick to the top of this container as you scroll.

This is useful for navigation headers, table headers, and section titles.

Position Coordinates

Combine position types with coordinate utilities to precisely place elements.

Edge Coordinates (0)

Align elements to the edges of their positioned container.

top-0
left-0

top-0
right-0

bottom-0
left-0

bottom-0
right-0

HTML

<div class="focus-position-relative">
  <div class="focus-position-absolute focus-top-0 focus-left-0">Top Left</div>
  <div class="focus-position-absolute focus-top-0 focus-right-0">Top Right</div>
  <div class="focus-position-absolute focus-bottom-0 focus-left-0">Bottom Left</div>
  <div class="focus-position-absolute focus-bottom-0 focus-right-0">Bottom Right</div>
</div>

Center Coordinates (50%)

Use 50% positioning combined with transforms to center elements. Useful for modals and overlays.

.focus-top-50 .focus-left-50
+ transform: translate(-50%, -50%)

HTML

<div class="focus-position-absolute focus-top-50 focus-left-50"
     style="transform: translate(-50%, -50%);">
  Centered element
</div>

Available Coordinate Classes

Class	Property	Value
`.focus-top-0`	top	0
`.focus-bottom-0`	bottom	0
`.focus-left-0`	left	0
`.focus-right-0`	right	0
`.focus-top-50`	top	50%
`.focus-left-50`	left	50%

Z-Index Utilities

Control the stacking order of positioned elements using z-index utilities.

Layering Example

Elements with higher z-index values appear in front of elements with lower values.

z-index: 0

z-index: 10

z-index: 20

z-index: 30

HTML

<div class="focus-position-absolute focus-z-0">Layer 0</div>
<div class="focus-position-absolute focus-z-10">Layer 10</div>
<div class="focus-position-absolute focus-z-20">Layer 20</div>
<div class="focus-position-absolute focus-z-30">Layer 30</div>

Available Z-Index Classes

Class	Z-Index Value	Typical Use Case
`.focus-z-0`	0	Base layer, default stacking
`.focus-z-10`	10	Slightly elevated elements
`.focus-z-20`	20	Dropdowns, popovers
`.focus-z-30`	30	Tooltips
`.focus-z-40`	40	Sticky headers
`.focus-z-50`	50	Fixed navigation
`.focus-z-100`	100	Modals, overlays
`.focus-z-1000`	1000	Critical overlays, notifications

Practical Examples

Real-world examples showing how to combine positioning utilities.

Sticky Header

Create a header that sticks to the top when scrolling.

Sticky Navigation Header

Page Content

Scroll down to see the header stick to the top...

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Centered Modal

Position a modal dialog in the center of the viewport.

HTML

<!-- Modal overlay -->
<div class="focus-position-fixed focus-top-0 focus-left-0 focus-right-0 focus-bottom-0 focus-z-100"
     style="background: rgba(0, 0, 0, 0.5);">

  <!-- Modal content -->
  <div class="focus-position-fixed focus-top-50 focus-left-50 focus-z-100"
       style="transform: translate(-50%, -50%);">
    <div class="focus-card">
      <h3>Modal Title</h3>
      <p>Modal content here...</p>
    </div>
  </div>
</div>

Floating Action Button

Create a floating action button fixed to the bottom-right corner.

Page Content

The floating action button is fixed to the bottom-right corner.

HTML

<button class="focus-position-fixed focus-bottom-0 focus-right-0 focus-z-50"
        style="margin: 2rem; width: 56px; height: 56px; border-radius: 50%;">
  <i class="fa fa-plus"></i>
</button>

Layered Cards

Create depth with overlapping cards using z-index.

Card 1

Z-index: 10

Card 2 (Active)

Z-index: 20

Card 3

Z-index: 10

HTML

<div class="focus-position-relative">
  <div class="focus-card focus-position-absolute focus-z-10">
    Card 1
  </div>
  <div class="focus-card focus-position-absolute focus-z-20">
    Card 2 (Active)
  </div>
  <div class="focus-card focus-position-absolute focus-z-10">
    Card 3
  </div>
</div>

Combining Utilities

Combine position, coordinate, and z-index utilities for powerful layouts.

Product Card

Hover to see the badge in the top-right corner

Sale!

HTML

<div class="focus-card focus-position-relative">
  <h4>Product Card</h4>
  <p>Product description...</p>

  <!-- Badge in top-right -->
  <span class="focus-badge focus-badge-danger
               focus-position-absolute focus-top-0 focus-right-0 focus-z-10">
    Sale!
  </span>

  <!-- Button in bottom-right -->
  <div class="focus-position-absolute focus-bottom-0 focus-right-0 focus-z-10">
    <button class="focus-btn focus-btn-primary">
      <i class="fa fa-shopping-cart"></i>
    </button>
  </div>
</div>

Best Practices

Follow these guidelines when working with positioning utilities:

Parent Context

Absolute and fixed positioned elements need a positioned parent (relative, absolute, fixed, or sticky) to anchor to. Always set .focus-position-relative on the parent container.

Z-Index Scale

Use the predefined z-index scale (10, 20, 30, etc.) to maintain consistent layering across your application. This prevents z-index conflicts and makes debugging easier.

Performance

Fixed and sticky positioning can affect scroll performance on complex pages. Use sparingly and test on lower-end devices. Consider using will-change CSS property for animated positioned elements.

Accessibility

Ensure positioned elements don't obscure important content or create keyboard navigation issues. Fixed headers and modals should be properly managed with focus trapping.

Mobile Considerations

Test sticky and fixed elements on mobile devices, as they behave differently on touch interfaces. Mobile browsers may handle fixed positioning inconsistently during scrolling.

Transform Centering

When centering with .focus-top-50 and .focus-left-50, always add transform: translate(-50%, -50%) in your custom CSS or use inline styles to perfectly center the element.