Z-Index Issue

다수의 레이어를 사용하는 경우 레이어가 겹쳐서 보이거나 닫히지 않는 이슈에 대한 내용입니다.

Overview

해당 기능은 Components의 기본 기능입니다. 다수의 레이어(다이얼로그)를 사용하는 경우 레이어가 겹쳐서 보이거나 닫히지 않는 이슈가 발생할 수 있습니다.
개별적인 레이어에 z-index 를 부여하여 해결하는것을 지양하고, 기본 기능을 사용하는것을 권장합니다.

Usage

기본 사용법 예시

샘플 코드

/src/pages/menu2/pages/page4.tsx

export default function Page4() {
  function ThemesZIndexExample() {
    return (
      <Card my='6' size='2'>
        <ThemesZIndexExampleRecursive />
      </Card>
    )
  }

  function ThemesZIndexExampleRecursive() {
    return (
      <Flex align='center' justify='center' height='160px'>
        <Dialog.Root>
          <Popover.Root>
            <Popover.Trigger>
              <Button>Recursive popover</Button>
            </Popover.Trigger>
            <Popover.Content>
              <Heading size='3' mb='2' trim='start'>
                Hello from the popover
              </Heading>
              <Dialog.Trigger>
                <Button color='gray' highContrast>
                  Recursive dialog
                </Button>
              </Dialog.Trigger>
            </Popover.Content>
          </Popover.Root>

          <Dialog.Content>
            <ThemesZIndexExampleRecursive /> // <- 재귀호출
          </Dialog.Content>
        </Dialog.Root>
      </Flex>
    )
  }

  return (
    <>
      <Heading size='3' mb='2' trim='start'>
        Dialog & Popover
      </Heading>
      <Box>
        <ThemesZIndexExample />
      </Box>
    </>
  )
}