如何让我的粘性导航栏保持在 Chakra-UI 的前面

Question

我正在使用 Chakra-UI 为我的 NextJS 项目创建 UI，并且正在努力让导航栏正常工作。它和移动导航菜单一样被正确修复，但菜单位于背景 div 的前面，但英雄 div 的后面（使用带有设置 blackAlpha 的 Flex' 组件）

如何让菜单只位于前面？使用沼泽标准CSS，如果我遇到这样的问题，我只使用z-index，但它对我不起作用。任何帮助表示赞赏

主页.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>
  
  );
}

我的英雄.js

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>
 )
}

Answer 1

设法通过将position:'static'添加到有问题的Flex来做到这一点，如图所示。

  <Flex
    align="center"
    pos="relative"
    justify="center"
    boxSize="full"
    bg="blackAlpha.700"
    position="static"
   >