Tailwind CSS导航栏问题：固定顶部但无法覆盖内容

我是Tailwind CSS新手，希望实现导航栏固定在页面顶部，且页面内容可以在导航栏下方滚动（内容不会跑到导航栏上方，同时避免顶部内容被导航栏遮挡）。尝试给导航栏设置relative定位、调整z-index后问题仍未解决。

相关代码如下：

function App() {

  const navbarData = [
    {
      text: "Home",
      link: "",
    },
    {
      text: "Internships",
      link: "/Internships",
    },
    {
      text: "Events and Activities",
      link: "/Events and Activities",
    },
    {
      text: "Contact Us",
      link: "/Contact Us",
    },
  ]

  return (
    <>
      <div className="font-Montserrat">
        <NavBar navbarData={navbarData} />
        <div className=" w-full h-[2000px] bg-red-700"></div>
        {/* <Heading text={"About Us"}/>
        <Footer/> */}
      </div>
    </>
  );
}

export default App;

const NavBar = ({navbarData}) => {
  return (
    <header className='w-screen sticky z-30 top-0 px-7 h-20 flex items-center justify-around shadow-md'>
      <div className="w-[80%] flex justify-between content-center">
      <div className='flex items-center justify-center pt-1'>
        {
          // logos.map((logo,index)=>(
          //   <img src={logo.src} key={index} alt={logo.alt} className='h-12 mx-3' />
          // ))
        }
      </div>
      <div className='flex flex-row px-16 items-center'>
        <nav >
          <ul className='flex gap-12 pb-2 '>
            {
              navbarData.map((item,index)=>(
                <li key={index} className='cursor-pointer font-semibold text-oirBrown hover:text-oirOrange'>{item.text}</li>
              ))
            }
          </ul>
          <hr className=' border-oirOrange w-[110%]' />
        </nav>
      </div>
      </div>
      <div className='flex'>
       <Button text={"Login/SignUp"}/>
      </div>
    </header>
  )
}

你的导航栏已经使用了sticky top-0组合，这其实已经能实现固定在顶部的效果，但需要补充两个关键设置：

1. 给导航栏添加背景色：当前导航栏没有设置背景色，滚动时内容会透过导航栏显示。添加bg-white（或你需要的自定义颜色）即可让导航栏盖住下方内容，配合已有的z-30确保导航栏始终在内容上层。
2. 给页面内容添加顶部内边距：sticky定位元素触发固定后，原文档流位置会被内容填充，导致内容顶部被导航栏遮挡。导航栏高度为h-20，因此给内容容器添加pt-20即可留出对应空间。

修改后的代码 #

NavBar组件（添加背景色）

const NavBar = ({navbarData}) => {
  return (
    <header className='w-screen sticky z-30 top-0 px-7 h-20 flex items-center justify-around shadow-md bg-white'>
      {/* 原有代码保持不变 */}
    </header>
  )
}

App组件（内容添加顶部内边距）

function App() {
  const navbarData = [
    {
      text: "Home",
      link: "",
    },
    {
      text: "Internships",
      link: "/Internships",
    },
    {
      text: "Events and Activities",
      link: "/Events and Activities",
    },
    {
      text: "Contact Us",
      link: "/Contact Us",
    },
  ]

  return (
    <>
      <div className="font-Montserrat">
        <NavBar navbarData={navbarData} />
        <div className="w-full h-[2000px] bg-red-700 pt-20"></div>
        {/* <Heading text={"About Us"}/>
        <Footer/> */}
      </div>
    </>
  );
}

export default App;

备选方案：使用fixed定位 #

如果希望导航栏完全脱离文档流（初始就不占据页面空间），可以将sticky替换为fixed，同样需要添加背景色和内容的顶部内边距：

<header className='w-screen fixed z-30 top-0 px-7 h-20 flex items-center justify-around shadow-md bg-white'>

这样就能实现导航栏固定在顶部，内容在下方正常滚动的效果。

内容的提问来源于stack exchange，提问作者Rohit Nandagawali