Utilities for controlling the stack order of an element.

React propsCSS Properties
zIndex={index}z-index: {index};


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>


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.



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.

Edit this page on GitHub