咨询：Next.js中<Image>组件覆盖固定导航栏的解决办法

问题核心是固定导航栏未明确设置层级，导致滚动时被Next.js Image组件覆盖。Next.js的Image组件会自动采用absolute定位实现响应式布局，直接修改Image的z-index通常无效——组件内部样式会覆盖自定义设置。

解决步骤 #

给固定导航栏的容器添加z-index属性，确保其层级高于页面内容。使用Tailwind的z-50类即可（数值足够高，能覆盖绝大多数页面元素）。

修改后的导航组件代码：

const Nav2 = () => {
  return (
    <div className="fixed bg-slate-200 w-full z-50">
      <ul className="flex gap-3 p-5 justify-end">
        <li>Item1</li>
        <li>Item2</li>
        <li>Item3</li>
        <li>Item4</li>
      </ul>
    </div>
  );
};
export default Nav2;

原理说明 #

固定定位（fixed）的元素默认z-index为auto，与其他元素处于同一层级。页面滚动时，Image所在的relative容器及内部元素的层级可能超过导航栏。通过给导航栏设置更高的z-index，可确保它始终显示在页面内容上方。

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