使用 position: fixed 可将元素固定在页面顶部，需设置 top: 0、width: 100%、z-index 等属性；注意避免父元素含 transform/filter 导致失效，iOS 软键盘引发偏移可用 sticky 替代或 JS 修复，确保层级不被遮挡。
当需要让一个元素固定在页面顶部，比如导航栏或工具条，使用 position: fixed 是最直接有效的方法。如果发现元素没有正常固定，可能是样式设置不完整或被其他CSS规则影响。以下是正确实现方式和常见问题的解决方案。
1. 基本用法：使用 position: fixed
将元素脱离文档流并相对于浏览器窗口固定位置，滚动页面时仍保持在可视区域中。
.fixed-top {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #fff;
z-index: 1000;
}
关键点说明：
- top: 0 确保元素贴住视口顶部
- left: 0 和 width: 100% 让元素横跨整个页面宽度
- z-index 避免被其他元素遮挡
- background-color 防止内容滚动时透过导航栏看到下方文字
2. 常见问题与解决方法
即使写了 position: fixed，也可能因为以下原因导致失效：
立即学习“前端免费学习笔记（深入）”；
问题一：父元素有 transform、perspective、filter 等属性如果祖先元素设置了如 transform: rotate() 或 filter: blur()，会创建新的定位上下文，导致 fixed 失效，变成相对该父元素定位。
解决方法：避免在父级使用这些属性，或调整 DOM 结构，将 fixed 元素移出此类容器。
问题二：移动端 Safari 或 iOS 输入法弹出时布局错乱iOS 浏览器在软键盘弹出时可能会改变视口高度，导致 fixed 元素偏移。
建议：配合 JavaScript 监听窗口变化，或使用 position: sticky 作为替代方案（适用于导航栏）。
即使 fixed 生效，也可能被后续内容盖住。
解决方法：提高 z-index 值，并确保没有其他高 z-index 元素干扰。
3. 替代方案：position: sticky
如果只是希望元素滚动到某位置后“吸附”在顶部，position: sticky 更适合且更稳定。
.sticky-top {
position: sticky;
top: 0;
background: white;
z-index: 1000;
}
它不会脱离文档流，行为更可预测，特别适合页面内的局部固定效果。
基本上就这些。只要确保 CSS 规则完整、无冲突父级样式，并处理好层级关系，position: fixed 就能稳定工作。
