css 想让导航栏在滚动时固定怎么办_position sticky top 0 配合 z-index_技术教程

position: sticky 不生效主因是父容器缺乏滚动上下文或存在 transform/filter 等属性；z-index 需配合定位元素及堆叠上下文生效；滚动抖动多因动态重排，应优先用 CSS 控制尺寸变化。

position: sticky; 不生效的常见原因

直接写 position: sticky; 和 top: 0; 却没反应？大概率是父容器“挡住了”。sticky 的行为依赖于最近的**有滚动约束的祖先容器**（比如设置了 overflow: hidden/auto/scroll，或本身就是 viewport）。如果导航栏的父元素高度不够、没有滚动上下文，或者父元素用了 transform / filter / will-change 等属性，就会让 sticky 失效。

检查点清单：

确保导航栏的**直接父容器**没有 transform、perspective 或 filter（哪怕值是 none）
父容器不能是 display: flex 或 grid 容器且自身高度被压缩（例如没设 min-height，导致父高度为 0）
导航栏本身不能有 float、clear 或 display: inline-block（需保持 block 或 flex 等常规流内行为）
top 值必须明确指定（top: 0 可以，但 top: auto 不行）

z-index 生效的前提条件

z-index 只对**定位元素**（position 为 relative、absolute、fixed 或 sticky）起作用。但光有 position: sticky 不够——它还必须处于一个“堆叠上下文”中，且该上下文未被更高层的祖先截断。

典型踩坑场景：

导航栏父容器设置了 z-index: 1 且 position: relative，结果导航栏被盖住（父容器创建了新堆叠上下文，子元素的 z-index 相对于父级计算）
页面顶部有 position: fixed 的 banner，但没设 z-index，而导航栏设了 z-index: 10，结果 banner 仍压在上面（因为 fixed 元素默认堆叠层级高于 sticky，需显式提升 banner 的 z-index）
使用了 CSS-in-JS 或 Shadow DOM，样式隔离导致 z-index 作用域失效

最小可靠写法（含兼容性兜底）

以下代码能覆盖绝大多数现代浏览器（Chrome 56+、Firefox 59+、Safari 6.1+），并避免常见陷阱：

header {
  position: -webkit-sticky; /* Safari 6.1–9 */
  position: sticky;
  top: 0;
  z-index: 100;
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
/ 确保父容器不破坏 sticky 行为 /
body > header {
/ 避免 body 上有 transform/filter /
}
/ 如果导航栏在 .container 内，确保 container 没有 transform /
.container {
/ 不要写 transform: translateZ(0); /
/ 不要写 filter: blur(0); /
}

注意：z-index: 100 是保险值，但实际只需比页面其他内容高即可；若页面已有 z-index: 999 的弹窗，这里至少得写 1000。