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>

Configuration Reference

Except for breakpoints, colors, and spacing, all keys in the theme object map to one of the core themes. All keys can be replaced or extended.

For more information, see the complete properties reference table.