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>
<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>