# Z-Index Control the stack order of elements with z-index utilities. **Category:** Utilities **Storybook:** https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-z-index--introduction ## Variants documented in Storybook - ZIndexShowcase: https://doc.ux4g.gov.in/web/?path=/story/ux4g-utilities-z-index--zindexshowcase ## 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 Z-Index. Each example shows the rendered HTML, the equivalent React JSX, and the Angular template markup. ### 1. Introduction — Introduction HTML: ```html

Utilities

Z-Index Utilities Reference

A complete reference of all z-index utility classes.

Comprehensive CSS Class Reference

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

Z-Index

Format: ux4g-z-{index}

Z-Index -1 ux4g-z-n1

Z-Index 0 ux4g-z-0

Z-Index 1 ux4g-z-1

Z-Index 2 ux4g-z-2

Z-Index 3 ux4g-z-3

``` React: ```jsx import React from 'react'; const ZIndexExample1Demo = () => ( <>

Utilities

Z-Index Utilities Reference

A complete reference of all z-index utility classes.

Comprehensive CSS Class Reference

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

{/* Z-Index */}

Z-Index

Format: ux4g-z-{index}

Z-Index -1 ux4g-z-n1

Z-Index 0 ux4g-z-0

Z-Index 1 ux4g-z-1

Z-Index 2 ux4g-z-2

Z-Index 3 ux4g-z-3

); export default ZIndexExample1Demo; ``` Angular: ```html

Utilities

Z-Index Utilities Reference

A complete reference of all z-index utility classes.

Comprehensive CSS Class Reference

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

Z-Index

Format: ux4g-z-{index}

Z-Index -1 ux4g-z-n1

Z-Index 0 ux4g-z-0

Z-Index 1 ux4g-z-1

Z-Index 2 ux4g-z-2

Z-Index 3 ux4g-z-3

``` ### 2. Z Index Showcase — Stacking Layers HTML: ```html

z-3

z-2

z-1

z-0

z-n1

``` React: ```jsx import React from 'react'; const ZIndexExample2Demo = () => ( <>

z-3

z-2

z-1

z-0

z-n1

); export default ZIndexExample2Demo; ``` Angular: ```html

z-3

z-2

z-1

z-0

z-n1

``` ## CSS class reference The following CSS partials define the Z-Index utility classes used in the examples above: ### z-index.utilities.css ```css /* Z-Index Utilities (Low Level) */ .ux4g-z-n1 { z-index: var(--ux4g-z-n1) ; } .ux4g-z-0 { z-index: var(--ux4g-z-0) ; } .ux4g-z-1 { z-index: var(--ux4g-z-1) ; } .ux4g-z-2 { z-index: var(--ux4g-z-2) ; } .ux4g-z-3 { z-index: var(--ux4g-z-3) ; } ``` ## 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.