Positions

Use these style properties such as zIndex, position, top, right, bottom and left to configure the position of an element.

Z-Index

We provide some zIndex values out of the box to control the stacking order of components.

export const zIndices = {
 hide: -1,
 auto: 'auto',
 base: 0,
 dropdown: 1000,
 sticky: 1100,
 fixed: 1200,
 overlay: 1300,
 drawer: 1400,
 modal: 1500,
 popover: 1600,
 toast: 1700,
 tooltip: 1800
}

EDITABLE EXAMPLE
copy
<Box position="relative" height="32x">
 <Box position="absolute" zIndex="popover" top="6x" left="50%" transform="translateX(-50%)" p="4x" bg="gray:80">z-index=popover</Box>
 <Box position="absolute" zIndex="toast" top="15x" left="50%" transform="translateX(-50%)" p="4x" bg="gray:70">z-index=toast</Box>
</Box>