How can I make my sticky navbar stay at the front in Chakra-UI

Question

I am using Chakra-UI to create a UI for my NextJS project, and am struggling to get the navbar working correctly. It is fixed correctly as well as the mobile nav menu but the menu sits in front of the background div, but behind the hero div (with Flex' component with the setting blackAlpha)

How can I make the menu sit only at the front? using bog standard CSS i just use the z-index if I have problems like this but it hasn't been working for me. Any help appreciated

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

my Header.js (with fluff removed)

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

my 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

Managed to do it by adding position:'static' to the problematic Flex as shown.

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