javascript - 我怎样才能让我的粘性导航栏留在 Chakra-UI 的前面

Question

我正在使用 Chakra-UI 为我的 NextJS 元素创建一个 UI，并且正在努力让导航栏正常工作。它和移动导航菜单一样正确固定，但菜单位于背景 div 的前面，但在英雄 div 的后面(使用 Flex 组件设置 blackAlpha)

如何让菜单只位于最前面？使用沼泽标准 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>
  
  );
}

我的 Hero.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

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

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