[英]How can I make my sticky navbar stay at the front in Chakra-UI
我正在使用 Chakra-UI 为我的 NextJS 项目创建 UI,并且正在努力让导航栏正常工作。 它与移动导航菜单一样正确固定,但菜单位于背景 div 前面,但在 hero 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>
)
}
如图所示,通过将 position:'static' 添加到有问题的 Flex 来设法做到这一点。
<Flex
align="center"
pos="relative"
justify="center"
boxSize="full"
bg="blackAlpha.700"
position="static"
>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.