Z-Index

Utilities for controlling the stack order of an element.

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

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.

<> <template preview> <x.div display="flex" justifyContent="center" position="relative" h={28} textAlign="center" transform translateX={12} > <x.div zIndex={40} position="relative" w={20} h={20} bg="fuchsia-500" borderWidth="0 1 0" borderColor="fuchsia-600" borderRadius="md" boxShadow="md" display="flex" justifyContent="center" alignItems="center" color="white" fontSize="2xl" fontWeight="extrabold" > 5 </x.div> <x.div zIndex={30} position="relative" left={-6} top={4} w={20} h={20} bg="fuchsia-500" borderWidth="0 1 0" borderColor="fuchsia-600" borderRadius="md" boxShadow="md" display="flex" justifyContent="center" alignItems="center" color="white" fontSize="2xl" fontWeight="extrabold" > 4 </x.div> <x.div zIndex={20} position="relative" left={-12} top={8} w={20} h={20} bg="fuchsia-500" borderWidth="0 1 0" borderColor="fuchsia-600" borderRadius="md" boxShadow="md" display="flex" justifyContent="center" alignItems="center" color="white" fontSize="2xl" fontWeight="extrabold" > 3 </x.div> <x.div zIndex={10} position="relative" left={-18} top={12} w={20} h={20} bg="fuchsia-500" borderWidth="0 1 0" borderColor="fuchsia-600" borderRadius="md" boxShadow="md" display="flex" justifyContent="center" alignItems="center" color="white" fontSize="2xl" fontWeight="extrabold" > 2 </x.div> <x.div zIndex={0} position="relative" left={-24} top={16} w={20} h={20} bg="fuchsia-500" borderWidth="0 1 0" borderColor="fuchsia-600" borderRadius="md" boxShadow="md" display="flex" justifyContent="center" alignItems="center" color="white" fontSize="2xl" > 1 </x.div> </x.div> </template> <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.

Edit this page on GitHub