我正在使用Chakra-UI为我的NextJS项目创建一个UI，并且正在努力让导航栏正确工作。它和移动的导航菜单一样被正确修复，但是菜单位于背景div的前面，但是在英雄div的后面（Flex的组件设置为blackAlpha）
我如何才能使菜单只坐在前面？使用沼泽标准CSS我只是使用z索引，如果我有这样的问题，但它一直没有为我工作。
HomePage.js

import React from 'react';
import Hero from './Hero/Hero';
import Header from './Header/Header';
import Features from './Features/Features';
const HomePage = () => {
  return (
    <>
      <Header/>
    <Hero/>
    <Features/>
    </>
  );
}
export default HomePage

字符串
我的Header.js（去除绒毛）

const Header = () => {
 return (
    // Header/TopNav Container
    <chakra.header
      ref={ref}
      shadow={y > height ? "sm" : undefined}
      transition="box-shadow 0.2s"
      bg={bg}
      borderTop="6px solid"
      borderTopColor="brand.400"
      w="full"
      overflowY="hidden"
      borderBottomWidth={2}
      borderBottomColor={useColorModeValue("gray.200", "gray.900")}
      position="fixed"
      top={0}
     >
     <chakra.div h="4.5rem" mx="auto"  maxW="1200px" >
       {DesktopNavContent}
       {MobileNavContent}
     </chakra.div>
   </chakra.header>
  
  );
}

型
我的英雄

const Hero = () => {
  const bg = useColorModeValue("white", "gray.800");
  return(
    <Box
      w="full"
      h="container.md"
      backgroundImage="url(https://images.unsplash.com/photo-1504384308090-c894fdcc538d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80)"
      bgPos="center"
      bgSize="cover"   
    >
    <Flex
      align="center"
      pos="relative"
      justify="center"
      boxSize="full"
      bg="blackAlpha.700"
    >
    <Stack textAlign="center" alignItems="center" spacing={6}>
      <Heading
        fontSize={["3xl", , "4xl"]}
        fontWeight="semibold"
        color="white"
      >
      Pay once, store forever....</Heading>
      <Heading
        fontSize={["3xl", , "4xl"]}
        fontWeight="semibold"
        color="blue.400"
        textTransform="uppercase"
       >
                    
       ARk Permanent Storage
                    
     </Heading>
     <Button
       colorScheme="brand"
       textTransform="uppercase"
       w="fit-content"
       class="px-4 py-2 mt-4 text-sm font-medium text-white uppercase transition-colors duration-200 transform bg-blue-600 rounded-md hover:bg-blue-500 focus:outline-none focus:bg-blue-500"
     >
     Start project
   </Button>
  </Stack>
 </Flex>
</Box>
 )
}

型