Zenn
👻

Chakra UI の zIndex と alias 一覧

2022/11/29に公開
CSS
Chakra UI
tech

Chakra UI で zIndex を指定する場合、alias を利用することができます

import { Box } from '@chakra-ui/react';

<Box zIndex="banner"></Box>

banner の他にも modal, docked などがあります。
数値との対応がわからなくなるときがあるため、下記をメモしておきます。

const zIndices = {
  hide: -1,
  auto: "auto",
  base: 0,
  docked: 10,
  dropdown: 1000,
  sticky: 1100,
  banner: 1200,
  overlay: 1300,
  modal: 1400,
  popover: 1500,
  skipLink: 1600,
  toast: 1700,
  tooltip: 1800,
}

出典は下記です（2022/11/29 時点。リンク切れはご容赦ください）
https://github.com/chakra-ui/chakra-ui/blob/119df7efa9948af67473002e93c851cc5dcae060/packages/components/theme/src/foundations/z-index.ts

Discussion