# Position Utilities for configuring the positioning behavior of elements, particularly useful for headers, footers, and sticky components. **Category:** Utilities **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-position--introduction ## Variants documented in Storybook - PositionShowcase: https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-position--positionshowcase ## Framework setup ### HTML / CDN ```html ``` ### React ```bash npm install ux4g-web-components ``` ```jsx import 'ux4g-web-components/styles.css'; import 'ux4g-web-components/design-system'; ``` ### Angular Update `angular.json`: ```json { "styles": [ "node_modules/ux4g-web-components/styles/ux4g.css", "src/styles.css" ], "scripts": [ "node_modules/ux4g-web-components/dist/runtime/design-system.js" ] } ``` ## Code examples The snippets below are extracted from the Storybook canvas for Position. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Introduction — Introduction HTML: ```html
Utilities

Position Utilities Reference

A complete reference of all position utility classes, including every responsive variant.

Comprehensive CSS Class Reference

Every class from the utility library, categorized for easy access.

Position Values

Format: ux4g-position-{value}

Static ux4g-static
Relative ux4g-relative
Absolute ux4g-absolute
Fixed ux4g-fixed
Sticky ux4g-sticky
Sm Static ux4g-sm-static
Sm Relative ux4g-sm-relative
Sm Absolute ux4g-sm-absolute
Sm Fixed ux4g-sm-fixed
Sm Sticky ux4g-sm-sticky
Md Static ux4g-md-static
Md Relative ux4g-md-relative
Md Absolute ux4g-md-absolute
Md Fixed ux4g-md-fixed
Md Sticky ux4g-md-sticky
Lg Static ux4g-lg-static
Lg Relative ux4g-lg-relative
Lg Absolute ux4g-lg-absolute
Lg Fixed ux4g-lg-fixed
Lg Sticky ux4g-lg-sticky
Xl Static ux4g-xl-static
Xl Relative ux4g-xl-relative
Xl Absolute ux4g-xl-absolute
Xl Fixed ux4g-xl-fixed
Xl Sticky ux4g-xl-sticky
2xl Static ux4g-2xl-static
2xl Relative ux4g-2xl-relative
2xl Absolute ux4g-2xl-absolute
2xl Fixed ux4g-2xl-fixed
2xl Sticky ux4g-2xl-sticky

Top / Bottom Placement

Format: ux4g-position-{value}

Top 0 ux4g-top-0
Top 50 ux4g-top-50
Top 100 ux4g-top-100
Bottom 0 ux4g-bottom-0
Bottom 50 ux4g-bottom-50
Bottom 100 ux4g-bottom-100
Sm Top 0 ux4g-sm-top-0
Sm Top 50 ux4g-sm-top-50
Sm Top 100 ux4g-sm-top-100
Sm Bottom 0 ux4g-sm-bottom-0
Sm Bottom 50 ux4g-sm-bottom-50
Sm Bottom 100 ux4g-sm-bottom-100
Md Top 0 ux4g-md-top-0
Md Top 50 ux4g-md-top-50
Md Top 100 ux4g-md-top-100
Md Bottom 0 ux4g-md-bottom-0
Md Bottom 50 ux4g-md-bottom-50
Md Bottom 100 ux4g-md-bottom-100
Lg Top 0 ux4g-lg-top-0
Lg Top 50 ux4g-lg-top-50
Lg Top 100 ux4g-lg-top-100
Lg Bottom 0 ux4g-lg-bottom-0
Lg Bottom 50 ux4g-lg-bottom-50
Lg Bottom 100 ux4g-lg-bottom-100
Xl Top 0 ux4g-xl-top-0
Xl Top 50 ux4g-xl-top-50
Xl Top 100 ux4g-xl-top-100
Xl Bottom 0 ux4g-xl-bottom-0
Xl Bottom 50 ux4g-xl-bottom-50
Xl Bottom 100 ux4g-xl-bottom-100
2xl Top 0 ux4g-2xl-top-0
2xl Top 50 ux4g-2xl-top-50
2xl Top 100 ux4g-2xl-top-100
2xl Bottom 0 ux4g-2xl-bottom-0
2xl Bottom 50 ux4g-2xl-bottom-50
2xl Bottom 100 ux4g-2xl-bottom-100

Start / End Placement

Format: ux4g-position-{value}

Start 0 ux4g-start-0
Start 50 ux4g-start-50
Start 100 ux4g-start-100
End 0 ux4g-end-0
End 50 ux4g-end-50
End 100 ux4g-end-100
Sm Start 0 ux4g-sm-start-0
Sm Start 50 ux4g-sm-start-50
Sm Start 100 ux4g-sm-start-100
Sm End 0 ux4g-sm-end-0
Sm End 50 ux4g-sm-end-50
Sm End 100 ux4g-sm-end-100
Md Start 0 ux4g-md-start-0
Md Start 50 ux4g-md-start-50
Md Start 100 ux4g-md-start-100
Md End 0 ux4g-md-end-0
Md End 50 ux4g-md-end-50
Md End 100 ux4g-md-end-100
Lg Start 0 ux4g-lg-start-0
Lg Start 50 ux4g-lg-start-50
Lg Start 100 ux4g-lg-start-100
Lg End 0 ux4g-lg-end-0
Lg End 50 ux4g-lg-end-50
Lg End 100 ux4g-lg-end-100
Xl Start 0 ux4g-xl-start-0
Xl Start 50 ux4g-xl-start-50
Xl Start 100 ux4g-xl-start-100
Xl End 0 ux4g-xl-end-0
Xl End 50 ux4g-xl-end-50
Xl End 100 ux4g-xl-end-100
2xl Start 0 ux4g-2xl-start-0
2xl Start 50 ux4g-2xl-start-50
2xl Start 100 ux4g-2xl-start-100
2xl End 0 ux4g-2xl-end-0
2xl End 50 ux4g-2xl-end-50
2xl End 100 ux4g-2xl-end-100

Centering (Translate)

Format: ux4g-position-{value}

Translate Middle ux4g-translate-middle
Translate Middle X ux4g-translate-middle-x
Translate Middle Y ux4g-translate-middle-y
Sm Translate Middle ux4g-sm-translate-middle
Sm Translate Middle X ux4g-sm-translate-middle-x
Sm Translate Middle Y ux4g-sm-translate-middle-y
Md Translate Middle ux4g-md-translate-middle
Md Translate Middle X ux4g-md-translate-middle-x
Md Translate Middle Y ux4g-md-translate-middle-y
Lg Translate Middle ux4g-lg-translate-middle
Lg Translate Middle X ux4g-lg-translate-middle-x
Lg Translate Middle Y ux4g-lg-translate-middle-y
Xl Translate Middle ux4g-xl-translate-middle
Xl Translate Middle X ux4g-xl-translate-middle-x
Xl Translate Middle Y ux4g-xl-translate-middle-y
2xl Translate Middle ux4g-2xl-translate-middle
2xl Translate Middle X ux4g-2xl-translate-middle-x
2xl Translate Middle Y ux4g-2xl-translate-middle-y

Fixed & Sticky Helpers

Format: ux4g-position-{value}

Fixed Top ux4g-fixed-top
Fixed Bottom ux4g-fixed-bottom
Sticky Top ux4g-sticky-top
Sticky Bottom ux4g-sticky-bottom

Offsets & Overlays

Format: ux4g-position-{value}

Bottom Xs ux4g-bottom-xs
Bottom Sm ux4g-bottom-sm
End Overflow Xs ux4g-end-overflow-xs
End Overflow Sm ux4g-end-overflow-sm
End Overflow Md ux4g-end-overflow-md
``` React: ```jsx import React from 'react'; const PositionExample1Demo = () => ( <>
Utilities

Position Utilities Reference

A complete reference of all position utility classes, including every responsive variant.

Comprehensive CSS Class Reference

Every class from the utility library, categorized for easy access.

{/* Position Values */}

Position Values

Format: ux4g-position-{value}

Static ux4g-static
Relative ux4g-relative
Absolute ux4g-absolute
Fixed ux4g-fixed
Sticky ux4g-sticky
Sm Static ux4g-sm-static
Sm Relative ux4g-sm-relative
Sm Absolute ux4g-sm-absolute
Sm Fixed ux4g-sm-fixed
Sm Sticky ux4g-sm-sticky
Md Static ux4g-md-static
Md Relative ux4g-md-relative
Md Absolute ux4g-md-absolute
Md Fixed ux4g-md-fixed
Md Sticky ux4g-md-sticky
Lg Static ux4g-lg-static
Lg Relative ux4g-lg-relative
Lg Absolute ux4g-lg-absolute
Lg Fixed ux4g-lg-fixed
Lg Sticky ux4g-lg-sticky
Xl Static ux4g-xl-static
Xl Relative ux4g-xl-relative
Xl Absolute ux4g-xl-absolute
Xl Fixed ux4g-xl-fixed
Xl Sticky ux4g-xl-sticky
2xl Static ux4g-2xl-static
2xl Relative ux4g-2xl-relative
2xl Absolute ux4g-2xl-absolute
2xl Fixed ux4g-2xl-fixed
2xl Sticky ux4g-2xl-sticky
{/* Top / Bottom */}

Top / Bottom Placement

Format: ux4g-position-{value}

Top 0 ux4g-top-0
Top 50 ux4g-top-50
Top 100 ux4g-top-100
Bottom 0 ux4g-bottom-0
Bottom 50 ux4g-bottom-50
Bottom 100 ux4g-bottom-100
Sm Top 0 ux4g-sm-top-0
Sm Top 50 ux4g-sm-top-50
Sm Top 100 ux4g-sm-top-100
Sm Bottom 0 ux4g-sm-bottom-0
Sm Bottom 50 ux4g-sm-bottom-50
Sm Bottom 100 ux4g-sm-bottom-100
Md Top 0 ux4g-md-top-0
Md Top 50 ux4g-md-top-50
Md Top 100 ux4g-md-top-100
Md Bottom 0 ux4g-md-bottom-0
Md Bottom 50 ux4g-md-bottom-50
Md Bottom 100 ux4g-md-bottom-100
Lg Top 0 ux4g-lg-top-0
Lg Top 50 ux4g-lg-top-50
Lg Top 100 ux4g-lg-top-100
Lg Bottom 0 ux4g-lg-bottom-0
Lg Bottom 50 ux4g-lg-bottom-50
Lg Bottom 100 ux4g-lg-bottom-100
Xl Top 0 ux4g-xl-top-0
Xl Top 50 ux4g-xl-top-50
Xl Top 100 ux4g-xl-top-100
Xl Bottom 0 ux4g-xl-bottom-0
Xl Bottom 50 ux4g-xl-bottom-50
Xl Bottom 100 ux4g-xl-bottom-100
2xl Top 0 ux4g-2xl-top-0
2xl Top 50 ux4g-2xl-top-50
2xl Top 100 ux4g-2xl-top-100
2xl Bottom 0 ux4g-2xl-bottom-0
2xl Bottom 50 ux4g-2xl-bottom-50
2xl Bottom 100 ux4g-2xl-bottom-100
{/* Start / End */}

Start / End Placement

Format: ux4g-position-{value}

Start 0 ux4g-start-0
Start 50 ux4g-start-50
Start 100 ux4g-start-100
End 0 ux4g-end-0
End 50 ux4g-end-50
End 100 ux4g-end-100
Sm Start 0 ux4g-sm-start-0
Sm Start 50 ux4g-sm-start-50
Sm Start 100 ux4g-sm-start-100
Sm End 0 ux4g-sm-end-0
Sm End 50 ux4g-sm-end-50
Sm End 100 ux4g-sm-end-100
Md Start 0 ux4g-md-start-0
Md Start 50 ux4g-md-start-50
Md Start 100 ux4g-md-start-100
Md End 0 ux4g-md-end-0
Md End 50 ux4g-md-end-50
Md End 100 ux4g-md-end-100
Lg Start 0 ux4g-lg-start-0
Lg Start 50 ux4g-lg-start-50
Lg Start 100 ux4g-lg-start-100
Lg End 0 ux4g-lg-end-0
Lg End 50 ux4g-lg-end-50
Lg End 100 ux4g-lg-end-100
Xl Start 0 ux4g-xl-start-0
Xl Start 50 ux4g-xl-start-50
Xl Start 100 ux4g-xl-start-100
Xl End 0 ux4g-xl-end-0
Xl End 50 ux4g-xl-end-50
Xl End 100 ux4g-xl-end-100
2xl Start 0 ux4g-2xl-start-0
2xl Start 50 ux4g-2xl-start-50
2xl Start 100 ux4g-2xl-start-100
2xl End 0 ux4g-2xl-end-0
2xl End 50 ux4g-2xl-end-50
2xl End 100 ux4g-2xl-end-100
{/* Translate / Centers */}

Centering (Translate)

Format: ux4g-position-{value}

Translate Middle ux4g-translate-middle
Translate Middle X ux4g-translate-middle-x
Translate Middle Y ux4g-translate-middle-y
Sm Translate Middle ux4g-sm-translate-middle
Sm Translate Middle X ux4g-sm-translate-middle-x
Sm Translate Middle Y ux4g-sm-translate-middle-y
Md Translate Middle ux4g-md-translate-middle
Md Translate Middle X ux4g-md-translate-middle-x
Md Translate Middle Y ux4g-md-translate-middle-y
Lg Translate Middle ux4g-lg-translate-middle
Lg Translate Middle X ux4g-lg-translate-middle-x
Lg Translate Middle Y ux4g-lg-translate-middle-y
Xl Translate Middle ux4g-xl-translate-middle
Xl Translate Middle X ux4g-xl-translate-middle-x
Xl Translate Middle Y ux4g-xl-translate-middle-y
2xl Translate Middle ux4g-2xl-translate-middle
2xl Translate Middle X ux4g-2xl-translate-middle-x
2xl Translate Middle Y ux4g-2xl-translate-middle-y
{/* Fixed/Sticky Helpers */}

Fixed & Sticky Helpers

Format: ux4g-position-{value}

Fixed Top ux4g-fixed-top
Fixed Bottom ux4g-fixed-bottom
Sticky Top ux4g-sticky-top
Sticky Bottom ux4g-sticky-bottom
{/* Offsets & Overlays */}

Offsets & Overlays

Format: ux4g-position-{value}

Bottom Xs ux4g-bottom-xs
Bottom Sm ux4g-bottom-sm
End Overflow Xs ux4g-end-overflow-xs
End Overflow Sm ux4g-end-overflow-sm
End Overflow Md ux4g-end-overflow-md
); export default PositionExample1Demo; ``` Angular: ```html
Utilities

Position Utilities Reference

A complete reference of all position utility classes, including every responsive variant.

Comprehensive CSS Class Reference

Every class from the utility library, categorized for easy access.

Position Values

Format: ux4g-position-{value}

Static ux4g-static
Relative ux4g-relative
Absolute ux4g-absolute
Fixed ux4g-fixed
Sticky ux4g-sticky
Sm Static ux4g-sm-static
Sm Relative ux4g-sm-relative
Sm Absolute ux4g-sm-absolute
Sm Fixed ux4g-sm-fixed
Sm Sticky ux4g-sm-sticky
Md Static ux4g-md-static
Md Relative ux4g-md-relative
Md Absolute ux4g-md-absolute
Md Fixed ux4g-md-fixed
Md Sticky ux4g-md-sticky
Lg Static ux4g-lg-static
Lg Relative ux4g-lg-relative
Lg Absolute ux4g-lg-absolute
Lg Fixed ux4g-lg-fixed
Lg Sticky ux4g-lg-sticky
Xl Static ux4g-xl-static
Xl Relative ux4g-xl-relative
Xl Absolute ux4g-xl-absolute
Xl Fixed ux4g-xl-fixed
Xl Sticky ux4g-xl-sticky
2xl Static ux4g-2xl-static
2xl Relative ux4g-2xl-relative
2xl Absolute ux4g-2xl-absolute
2xl Fixed ux4g-2xl-fixed
2xl Sticky ux4g-2xl-sticky

Top / Bottom Placement

Format: ux4g-position-{value}

Top 0 ux4g-top-0
Top 50 ux4g-top-50
Top 100 ux4g-top-100
Bottom 0 ux4g-bottom-0
Bottom 50 ux4g-bottom-50
Bottom 100 ux4g-bottom-100
Sm Top 0 ux4g-sm-top-0
Sm Top 50 ux4g-sm-top-50
Sm Top 100 ux4g-sm-top-100
Sm Bottom 0 ux4g-sm-bottom-0
Sm Bottom 50 ux4g-sm-bottom-50
Sm Bottom 100 ux4g-sm-bottom-100
Md Top 0 ux4g-md-top-0
Md Top 50 ux4g-md-top-50
Md Top 100 ux4g-md-top-100
Md Bottom 0 ux4g-md-bottom-0
Md Bottom 50 ux4g-md-bottom-50
Md Bottom 100 ux4g-md-bottom-100
Lg Top 0 ux4g-lg-top-0
Lg Top 50 ux4g-lg-top-50
Lg Top 100 ux4g-lg-top-100
Lg Bottom 0 ux4g-lg-bottom-0
Lg Bottom 50 ux4g-lg-bottom-50
Lg Bottom 100 ux4g-lg-bottom-100
Xl Top 0 ux4g-xl-top-0
Xl Top 50 ux4g-xl-top-50
Xl Top 100 ux4g-xl-top-100
Xl Bottom 0 ux4g-xl-bottom-0
Xl Bottom 50 ux4g-xl-bottom-50
Xl Bottom 100 ux4g-xl-bottom-100
2xl Top 0 ux4g-2xl-top-0
2xl Top 50 ux4g-2xl-top-50
2xl Top 100 ux4g-2xl-top-100
2xl Bottom 0 ux4g-2xl-bottom-0
2xl Bottom 50 ux4g-2xl-bottom-50
2xl Bottom 100 ux4g-2xl-bottom-100

Start / End Placement

Format: ux4g-position-{value}

Start 0 ux4g-start-0
Start 50 ux4g-start-50
Start 100 ux4g-start-100
End 0 ux4g-end-0
End 50 ux4g-end-50
End 100 ux4g-end-100
Sm Start 0 ux4g-sm-start-0
Sm Start 50 ux4g-sm-start-50
Sm Start 100 ux4g-sm-start-100
Sm End 0 ux4g-sm-end-0
Sm End 50 ux4g-sm-end-50
Sm End 100 ux4g-sm-end-100
Md Start 0 ux4g-md-start-0
Md Start 50 ux4g-md-start-50
Md Start 100 ux4g-md-start-100
Md End 0 ux4g-md-end-0
Md End 50 ux4g-md-end-50
Md End 100 ux4g-md-end-100
Lg Start 0 ux4g-lg-start-0
Lg Start 50 ux4g-lg-start-50
Lg Start 100 ux4g-lg-start-100
Lg End 0 ux4g-lg-end-0
Lg End 50 ux4g-lg-end-50
Lg End 100 ux4g-lg-end-100
Xl Start 0 ux4g-xl-start-0
Xl Start 50 ux4g-xl-start-50
Xl Start 100 ux4g-xl-start-100
Xl End 0 ux4g-xl-end-0
Xl End 50 ux4g-xl-end-50
Xl End 100 ux4g-xl-end-100
2xl Start 0 ux4g-2xl-start-0
2xl Start 50 ux4g-2xl-start-50
2xl Start 100 ux4g-2xl-start-100
2xl End 0 ux4g-2xl-end-0
2xl End 50 ux4g-2xl-end-50
2xl End 100 ux4g-2xl-end-100

Centering (Translate)

Format: ux4g-position-{value}

Translate Middle ux4g-translate-middle
Translate Middle X ux4g-translate-middle-x
Translate Middle Y ux4g-translate-middle-y
Sm Translate Middle ux4g-sm-translate-middle
Sm Translate Middle X ux4g-sm-translate-middle-x
Sm Translate Middle Y ux4g-sm-translate-middle-y
Md Translate Middle ux4g-md-translate-middle
Md Translate Middle X ux4g-md-translate-middle-x
Md Translate Middle Y ux4g-md-translate-middle-y
Lg Translate Middle ux4g-lg-translate-middle
Lg Translate Middle X ux4g-lg-translate-middle-x
Lg Translate Middle Y ux4g-lg-translate-middle-y
Xl Translate Middle ux4g-xl-translate-middle
Xl Translate Middle X ux4g-xl-translate-middle-x
Xl Translate Middle Y ux4g-xl-translate-middle-y
2xl Translate Middle ux4g-2xl-translate-middle
2xl Translate Middle X ux4g-2xl-translate-middle-x
2xl Translate Middle Y ux4g-2xl-translate-middle-y

Fixed & Sticky Helpers

Format: ux4g-position-{value}

Fixed Top ux4g-fixed-top
Fixed Bottom ux4g-fixed-bottom
Sticky Top ux4g-sticky-top
Sticky Bottom ux4g-sticky-bottom

Offsets & Overlays

Format: ux4g-position-{value}

Bottom Xs ux4g-bottom-xs
Bottom Sm ux4g-bottom-sm
End Overflow Xs ux4g-end-overflow-xs
End Overflow Sm ux4g-end-overflow-sm
End Overflow Md ux4g-end-overflow-md
``` ### 2. Position Showcase — Fixed Positioning HTML: ```html
Fixed Top
Fixed-Top
Simulated: Content flows behind the fixed element.
Fixed Bottom
Simulated: Lower content area for persistent actions.
Fixed-Bottom
``` React: ```jsx import React from 'react'; const PositionExample2Demo = () => ( <>
{/* Fixed Top Demo */}
Fixed Top
Fixed-Top
Simulated: Content flows behind the fixed element.
{/* Fixed Bottom Demo */}
Fixed Bottom
Simulated: Lower content area for persistent actions.
Fixed-Bottom
); export default PositionExample2Demo; ``` Angular: ```html
Fixed Top
Fixed-Top
Simulated: Content flows behind the fixed element.
Fixed Bottom
Simulated: Lower content area for persistent actions.
Fixed-Bottom
``` ### 3. Position Showcase — Sticky Positioning HTML: ```html
Sticky Top
Sticky-Top
Scroll down to see this element stick to the top edge of this container.
Sticky Bottom
This footer stays visible as long as its parent is in view.
Sticky-Bottom
``` React: ```jsx import React from 'react'; const PositionExample3Demo = () => ( <>
{/* Sticky Top */}
Sticky Top
Sticky-Top
Scroll down to see this element stick to the top edge of this container.
{/* Sticky Bottom */}
Sticky Bottom
This footer stays visible as long as its parent is in view.
Sticky-Bottom
); export default PositionExample3Demo; ``` Angular: ```html
Sticky Top
Sticky-Top
Scroll down to see this element stick to the top edge of this container.
Sticky Bottom
This footer stays visible as long as its parent is in view.
Sticky-Bottom
``` ### 4. Position Showcase — Absolute Placement HTML: ```html
Top-0 Start-0
Top-0 Start-50
Top-0 End-0
Top-50 Start-0
Center
Top-50 End-0
Bottom-0 Start-0
Bottom-0 Start-50
Bottom-0 End-0
``` React: ```jsx import React from 'react'; const PositionExample4Demo = () => ( <>
{/* Top Start */}
Top-0 Start-0
{/* Top Center */}
Top-0 Start-50
{/* Top End */}
Top-0 End-0
{/* Middle Start */}
Top-50 Start-0
{/* Center Center */}
Center
{/* Middle End */}
Top-50 End-0
{/* Bottom Start */}
Bottom-0 Start-0
{/* Bottom Center */}
Bottom-0 Start-50
{/* Bottom End */}
Bottom-0 End-0
); export default PositionExample4Demo; ``` Angular: ```html
Top-0 Start-0
Top-0 Start-50
Top-0 End-0
Top-50 Start-0
Center
Top-50 End-0
Bottom-0 Start-0
Bottom-0 Start-50
Bottom-0 End-0
``` ### 5. Position Showcase — Position / Corners HTML: ```html
``` React: ```jsx import React from 'react'; const PositionExample5Demo = () => ( <>
); export default PositionExample5Demo; ``` Angular: ```html
``` ### 6. Position Showcase — Position / Mixed Placement HTML: ```html
``` React: ```jsx import React from 'react'; const PositionExample6Demo = () => ( <>
); export default PositionExample6Demo; ``` Angular: ```html
``` ## CSS class reference The following CSS partials define the Position utility classes used in the examples above: ### position.utilities.css ```css /* ========================================== UX4G Position Utilities (FIXED ENGINE) ========================================== */ /* ===== Engine (SCOPED — NOT GLOBAL) ===== */ .ux4g-static, .ux4g-relative, .ux4g-absolute, .ux4g-fixed, .ux4g-sticky, .ux4g-top-0, .ux4g-top-50, .ux4g-top-100, .ux4g-bottom-0, .ux4g-bottom-50, .ux4g-bottom-100, .ux4g-start-0, .ux4g-start-50, .ux4g-start-100, .ux4g-end-0, .ux4g-end-50, .ux4g-end-100, .ux4g-translate-middle, .ux4g-translate-middle-x, .ux4g-translate-middle-y, .ux4g-bottom-xs, .ux4g-bottom-sm, .ux4g-end-overflow-xs, .ux4g-end-overflow-sm, .ux4g-end-overflow-md { position: var(--ux4g-pos-current, unset); top: var(--ux4g-top-current, unset); right: var(--ux4g-end-current, unset); bottom: var(--ux4g-bottom-current, unset); left: var(--ux4g-start-current, unset); transform: var(--ux4g-transform-current, unset); } /* ===== Position ===== */ .ux4g-static { --ux4g-pos-current: var(--ux4g-pos-static); } .ux4g-relative { --ux4g-pos-current: var(--ux4g-pos-relative); } .ux4g-absolute { --ux4g-pos-current: var(--ux4g-pos-absolute); } .ux4g-fixed { --ux4g-pos-current: var(--ux4g-pos-fixed); } .ux4g-sticky { --ux4g-pos-current: var(--ux4g-pos-sticky); } /* ===== Top ===== */ .ux4g-top-0 { --ux4g-top-current: var(--ux4g-pos-top-0); } .ux4g-top-50 { --ux4g-top-current: var(--ux4g-pos-top-50); } .ux4g-top-100 { --ux4g-top-current: var(--ux4g-pos-top-100); } /* ===== Bottom ===== */ .ux4g-bottom-0 { --ux4g-bottom-current: var(--ux4g-pos-bottom-0); } .ux4g-bottom-50 { --ux4g-bottom-current: var(--ux4g-pos-bottom-50); } .ux4g-bottom-100 { --ux4g-bottom-current: var(--ux4g-pos-bottom-100); } /* ===== Start ===== */ .ux4g-start-0 { --ux4g-start-current: var(--ux4g-pos-start-0); } .ux4g-start-50 { --ux4g-start-current: var(--ux4g-pos-start-50); } .ux4g-start-100 { --ux4g-start-current: var(--ux4g-pos-start-100); } /* ===== End ===== */ .ux4g-end-0 { --ux4g-end-current: var(--ux4g-pos-end-0); } .ux4g-end-50 { --ux4g-end-current: var(--ux4g-pos-end-50); } .ux4g-end-100 { --ux4g-end-current: var(--ux4g-pos-end-100); } /* ===== Offset Utilities (FIX ADDED) ===== */ .ux4g-bottom-xs { --ux4g-bottom-current: var(--ux4g-pos-bottom-xs); } .ux4g-bottom-sm { --ux4g-bottom-current: var(--ux4g-pos-bottom-sm); } .ux4g-end-overflow-xs { --ux4g-end-current: var(--ux4g-pos-end-overflow-xs); } .ux4g-end-overflow-sm { --ux4g-end-current: var(--ux4g-pos-end-overflow-sm); } .ux4g-end-overflow-md { --ux4g-end-current: var(--ux4g-pos-end-overflow-md); } /* ===== Transform ===== */ .ux4g-translate-middle { --ux4g-transform-current: var(--ux4g-pos-translate-middle); } .ux4g-translate-middle-x { --ux4g-transform-current: var(--ux4g-pos-translate-middle-x); } .ux4g-translate-middle-y { --ux4g-transform-current: var(--ux4g-pos-translate-middle-y); } /* ===== Helpers ===== */ .ux4g-fixed-top { position: var(--ux4g-pos-fixed); top: 0; left: 0; right: 0; } .ux4g-fixed-bottom { position: var(--ux4g-pos-fixed); bottom: 0; left: 0; right: 0; } .ux4g-sticky-top { position: var(--ux4g-pos-sticky); top: 0; } .ux4g-sticky-bottom { position: var(--ux4g-pos-sticky); bottom: 0; } ``` ## Accessibility notes - Use the classes/tokens exactly as documented. Changing token values without a design review can break accessibility. - Ensure color contrast meets WCAG 2.1 AA. - Test responsive and RTL behavior where utility classes rely on logical properties.