如何用Tailwind与React固定Div至屏幕？滚动时Div仍移动的问题

核心原因 #

你的fixed定位div之所以会随滚动移动，大概率是因为某个祖先元素（包括你写的父级<div className="md:hidden relative">）存在transform、perspective或filter属性——这些属性会改变CSS fixed定位的参考系，让元素不再相对于视口固定，而是相对于拥有这些属性的祖先元素定位。

具体修复步骤 #

1. 移除父元素的relative类
   fixed定位不需要依赖父元素的relative，反而如果父元素或上层容器有transform类，会干扰fixed的定位逻辑。修改父div的类：

   <div className="md:hidden">
   

2. 检查所有上层容器
   排查页面中包裹这个导航的所有上层元素，确保没有设置transform、perspective、filter相关的Tailwind类（比如scale-*、translate-*、rotate-*、filter等），这些都会破坏fixed的视口定位。

3. 优化fixed元素的样式（可选）
   给fixed导航设置全屏高度，避免靠pb-[400px]撑高度的不合理写法，同时确保覆盖整个左侧区域：

   <div className="md:hidden pr-7 bg-white text-left w-[60%] h-screen fixed top-0 left-0">
   

修改后的完整代码 #

<div className="md:hidden">
    <div className="md:hidden pr-7 bg-white text-left w-[60%] h-screen fixed top-0 left-0">
        <CloseIcon className="text-black absolute right-4 top-5 w-5" />
        <ul className="pt-16 pl-3">
            <li className="text-black"><a className="hover:text-primary visited:text-black" href="#home">HOME</a></li>
            <li className="text-white"><a className="hover:text-primary visited:text-black" href="#about">ABOUT</a></li>
            <li className="text-white"><a className="hover:text-primary visited:text-black" href="#skills">SKILLS</a></li>
            <li className="text-white"><a className="hover:text-primary visited:text-black" href="#projects">PROJECTS</a></li>
            <li className="text-white"><a className="hover:text-primary visited:text-black" href="#contact">CONTACT</a></li>
        </ul>
    </div>
</div>

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