Z-Index

Utilities for controlling the stack order of an element.

Usage

Control the stack order (or three-dimensional positioning) of an element in xstyled, regardless of order it has been displayed, using the zIndex={index} utilities.

<x.div zIndex={40}>5</x.div>
<x.div zIndex={30}>4</x.div>
<x.div zIndex={20}>3</x.div>
<x.div zIndex={10}>2</x.div>
<x.div zIndex={0}>1</x.div>

Responsive

To apply a visibility utility only at a specific breakpoint, use responsive object notation. For example, adding the property visibility={{ md: "hidden" }} to an element would apply the visibility="hidden" utility at medium screen sizes and above.

<x.div visibility={{ md: 'hidden' }} />

For more information about xstyled's responsive design features, check out Responsive Design documentation.

Customizing

Z-Indices

If you'd like to customize your values for zIndex, use the theme.zIndices section of your theme.

  // theme.js
  export const theme = {
    zIndices: {
+     dialog: 200,
+     tooltip: 300,
    },
  }

Learn more about customizing the default theme in the theme customization documentation.