position: sticky加top: 0不生效，是因为粘性行为被父容器拦截：需设max-height和overflow-y: auto；祖先层有transform/filter会阻断；thead th必须设background-color、z-index≥1及border-bottom；table需table-layout: fixed并统一分配列宽。
为什么position: sticky加了top: 0还是不生效？
不是样式写错了，而是粘性行为被父容器“拦住了”。sticky必须依赖一个**有滚动能力的祖先容器**，否则它就只是普通定位——浏览器根本不会触发粘性逻辑。
- 外层容器必须设
max-height和overflow-y: auto（不能是visible、hidden或scroll） - 祖先链上任意一层加了
transform、filter或will-change，都会创建新层叠上下文，直接阻断sticky <thead> 不能设 <code>display: block；<tr> 不能有 <code>overflow: hidden（会裁剪粘性区域）thead th必须显式设置哪些样式才不透底、不遮挡？滚动时表头叠在
<tbody> 上，但如果没有背景和层级控制，文字会被下方内容盖住或透出底色，这是最常被忽略的硬性要求。 <ul> <li> <code>background-color必须是明确值，比如#fff或white，transparent或未声明等于没设-
z-index至少为1，推荐用10起步，避免被其他浮动元素压住 - 加
border-bottom: 1px solid #ddd能视觉分隔表头和第一行数据，否则容易“粘连”感
列宽错位怎么办？表头和内容列对不齐
滚动时 <thead> 固定、<code><tbody> 滚动，浏览器可能因重排机制导致列宽计算不一致——尤其内容动态加载或字体未就绪时。
<ul>
<li>强制启用固定布局：<code>table { table-layout: fixed; width: 100%; }
th:nth-child(1), td:nth-child(1) { width: 120px; }（别混用 % 和 px）border-collapse: collapse 和单独给 th/td 设边框，容易导致粘性区域宽度偏移IE11 或旧版 Safari 怎么办？
position: sticky 在 IE 全系都不支持，Safari ≤ 15.4 也有 z-index 失效、top 偏移不准等问题。这时候不是“修”，而是换结构。
- 放弃原生
<table>，拆成三个独立块：<code><div class="table-head"> + <code><div class="table-body"> + <code><div class="table-foot"> <li>用 JS 监听 <code>scroll，节流后更新table-head的transform: translateY()，别直接改top（重排开销大） - 如果项目用了 React/Vue，优先选
react-table+useSticky这类已处理兼容路径的方案，别自己从零写
真正卡住人的，从来不是那几行
sticky 样式，而是你得先确认表格是否处在“能被正确识别”的渲染上下文中——有时候删掉一行 transform，问题就没了。
