v5.26.5

đź“Ť Position Utilities

CSS position utility classes for layout control and element positioning

Overview

Position utilities provide CSS position property values to control how elements are positioned in the document flow. These utilities allow you to change an element's positioning context without writing custom CSS.

Key Features

  • âś… Static positioning
  • âś… Relative positioning
  • âś… Absolute positioning
  • âś… Fixed positioning
  • âś… Sticky positioning

Position Values

The following position classes are available:

Class CSS Property Description
.ey-position--static position: static Default positioning in document flow
.ey-position--relative position: relative Positioned relative to its normal position
.ey-position--absolute position: absolute Positioned relative to nearest positioned ancestor
.ey-position--fixed position: fixed Positioned relative to the viewport
.ey-position--sticky position: sticky Hybrid relative and fixed positioning

Static Positioning

Static is the default position value. Elements are positioned in the normal document flow.

<div class="ey-position--static">...</div>

Use cases:

  • Reset previously positioned elements
  • Default layout behavior

Relative Positioning

Relative positioning allows you to offset an element from its normal position while maintaining its space in the document flow.

<div class="ey-position--relative">...</div>

Use cases:

  • Fine-tuning element placement
  • Creating positioning context for absolutely positioned children
  • Layering elements with z-index

Absolute Positioning

Absolute positioning removes an element from the normal document flow and positions it relative to the nearest positioned ancestor.

<div class="ey-position--relative">
  <div class="ey-position--absolute">Absolutely positioned</div>
</div>

Use cases:

  • Overlays and modals
  • Tooltips and popovers
  • Dropdown menus
  • Badges on images

Fixed Positioning

Fixed positioning removes an element from the document flow and fixes it relative to the viewport. It remains in the same position when scrolling.

<div class="ey-position--fixed">...</div>

Use cases:

  • Sticky headers and navigation
  • Floating action buttons (FAB)
  • Fixed sidebars
  • Modal backdrops
  • Chat bubbles

Sticky Positioning

Sticky positioning is a hybrid between relative and fixed positioning. An element is treated as relative until it reaches a specified offset, then it becomes fixed.

<div class="ey-position--sticky">...</div>

Use cases:

  • Sticky table headers
  • Section headers in scrollable lists
  • Floating sidebars
  • Contextual toolbars
Note: Sticky positioning has limited browser support in older browsers. Test thoroughly in your target environments.

Usage Examples

Example 1: Modal with Fixed Backdrop

<div class="ey-position--fixed" style="top: 0; left: 0; right: 0; bottom: 0;">
  <!-- Semi-transparent backdrop -->
</div>
<div class="ey-position--fixed" style="top: 50%; left: 50%; transform: translate(-50%, -50%);">
  <!-- Modal content -->
</div>

Example 2: Sticky Table Header

<table>
  <thead>
    <tr>
      <th class="ey-position--sticky">Header 1</th>
      <th class="ey-position--sticky">Header 2</th>
    </tr>
  </thead>
</table>

Example 3: Badge on Image

<div class="ey-position--relative">
  <img src="image.jpg" alt="Product">
  <span class="ey-position--absolute" style="top: 10px; right: 10px;">
    Sale
  </span>
</div>