Menu stacking issue

[spidertwin2]

Hi,

I am unable to position elements correctly. The ViewIcon is visible on top of the dropdown menu, how should I send it back?

signup.js

<InputGroup size="md">
  <Input
    {...field}
    id="password"
    type={show ? "text" : "password"}
    placeholder="Enter password"
    isRequired={true}
  />
  <InputRightElement h="1rem">
    <IconButton
      mr="0"
      variant="ghost"
      colorScheme="gray.800"
      aria-label="Show Hide Password"
      icon={show ? <ViewOffIcon /> : <ViewIcon />}
      onClick={handleShow}
    />
  </InputRightElement>
</InputGroup>

navbar.js

<Menu m="auto" z-index="1">
  <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
    MyAccount
  </MenuButton>
  <MenuList>
    <MenuItem>Profile</MenuItem>
    <MenuItem>Community</MenuItem>
    <MenuItem>Resources</MenuItem>
    <MenuItem>Discussion</MenuItem>
    <MenuItem>Stats</MenuItem>
    <MenuDivider />
    <MenuItem>Settings</MenuItem>
    <MenuItem>SignOut</MenuItem>
  </MenuList>
</Menu>

Thank you :)

[chr-ge]

Try adding zIndex="dropdown" to the Menu instead of z-index="1".

[spidertwin2]

I should have shared the whole code earlier, for a better perspective. Adding position="relative" and zIndex="dropdown" to the outermost parent solved it! Thanks 🙏

<Flex
      direction="row"
      w="100%"
      p="3% 10%"
      justify="space-between"
      color={useColorModeValue("gray.800", "white")}
      position="relative"
      zIndex="dropdown"
    >
      <Flex>
        <BrandName>
          <Link href="/">
            <a>App</a>
          </Link>
        </BrandName>
      </Flex>
      <Flex w="170px" justify="space-between">
        <DarkModeSwitch />
        <Menu m="auto">
          <MenuButton as={Button} rightIcon={<ChevronDownIcon />}>
            MyAccount
          </MenuButton>
          <MenuList>
            <MenuItem>Profile</MenuItem>
            <MenuItem>Community</MenuItem>
            <MenuItem>Resources</MenuItem>
            <MenuItem>Discussion</MenuItem>
            <MenuItem>Stats</MenuItem>
            <MenuDivider />
            <MenuItem>Settings</MenuItem>
            <MenuItem>SignOut</MenuItem>
          </MenuList>
        </Menu>
      </Flex>
    </Flex>

[derrick-null]

You saved my day. This issue bothered me for 2 hours. My scenario is I have customized dropdown composites with an Input and a List. Below the dropdown is a table with a checkbox that can select all items of the table. The checkbox is always displayed. Following your approach, I finally solved this issue.