fixed头部在管理系统中易翻车，因其使header脱离文档流导致main被遮挡、padding-top失效、iOS抖动、transform干扰定位及overflow:hidden致“失重”；现代方案多采用flex布局配合min-height:0实现天然响应式。
position: fixed 是最直接的方案，但不加控制会导致 main 内容被遮挡、滚动错位、iOS Safari 抖动、可访问性降级——真正在用的管理系统几乎都不靠它硬顶。
为什么 position: fixed 头部在管理系统里大概率翻车
它让 <header> 脱离文档流，<main> 就从视口顶部开始渲染，直接被盖住；更麻烦的是，一旦头部高度动态变化（比如多行导航、响应式折叠）、或用户缩放页面，你之前写的 padding-top: 64px 就立刻失效。
- 常见错误现象：
main首屏内容看不见、滚动条出现在整个页面而非内容区、屏幕阅读器跳过导航直读正文 - 移动端 iOS Safari 中，
position: fixed可能触发视口缩放抖动，必须加transform: translateZ(0)强制 GPU 加速 -
<body>或任意父层若带transform、perspective、filter，fixed元素会退化为 relative 定位 - 如果全局临时加了
overflow: hidden（比如弹出模态框时），整个页面的fixed元素都会“失重”下坠
display: flex + min-height: 0 是后台管理系统的事实标准
现代管理系统（如 Ant Design Pro、Vue Admin、React Admin）默认采用 Flex 布局撑满视口，头部和底部保持流内尺寸，main 自动吃掉剩余空间并支持内部滚动——不用算高度、不依赖 JS、天然响应式。
-
body必须设min-height: 100vh（不是height: 100vh），否则短内容页会被拉伸溢出 -
main必须写flex: 1且显式加min-height: 0，否则overflow-y: auto不生效（Flex 子项默认最小高度由内容撑开） - 如果
main内还有嵌套 Flex（如左右分栏），其子项也得加min-height: 0，否则内部滚动照样挂掉 - IE11 对
flex: 1支持不稳，可改用margin-top: auto加在footer上实现沉底
position: sticky 头部为何在管理后台经常不动
它不是“写了就粘”，而是严格依赖滚动上下文：只有当目标元素（如 <header>）的**最近滚动祖先容器**同时满足三个条件时，浏览器才激活粘性行为。
立即学习“前端免费学习笔记（深入）”；
- 该祖先容器必须有明确高度（
height、max-height或通过 Flex/Grid 分配空间） - 该祖先容器必须设
overflow-y: auto或scroll - 从该祖先向上查，任何一层都不能有
overflow: hidden、clip或transform（哪怕隔了<div>包裹） - 典型失败场景：
<body>为弹窗临时加了overflow: hidden，结果全站 sticky 全失效
表格内 <thead> 固定怎么不出 bug
后台最常卡在表格表头固定上——position: sticky 在 <th> 上看似简单，但漏掉任一条件就会白忙活。
-
<tbody>必须设max-height+overflow-y: auto，否则top: 0没参照物 -
<th>必须显式设background-color，不然滚动时底色透出难看 -
z-index必须设（哪怕只是1），否则被后续<tr>盖住 - IE11 完全不支持
sticky，务实做法是把<thead>提到表格外，用两个分离的<table>+table-layout: fixed同步列宽
真正难的不是写哪一行 CSS，而是判断当前布局中谁是滚动容器、谁被 transform 干扰、谁悄悄加了 overflow: hidden——这些细节藏在层层嵌套的组件里，不 inspect 元素根本发现不了。
