想实现 div 不随滚动条移动，最核心的思路是改变元素的定位上下文。CSS 提供了两种常用定位方式：position: fixed 和 position: sticky。前者让元素始终相对浏览器视口保持固定，后者则是在滚动达到指定阈值后才固定在容器边缘。实际开发中，如果给 div 设置了 position: fixed 却发现它仍然跟着页面滚动，通常和祖先元素上的 transform、filter 等属性有关。下面从定位机制、代码实现、失效排查和移动端适配几个角度展开说明。
一、使用 position: fixed 让 div 相对视口固定
position: fixed 会把元素从正常文档流中移除，使其不再占据原来的物理位置，然后以浏览器可视窗口作为参照物，通过 top、right、bottom、left 四个属性确定相对视口的偏移量。即使页面滚动条向下移动几千像素，固定元素的坐标也不会改变，看起来就像是钉在了屏幕上。
需要注意的是，由于元素脱离文档流，它原来占用的空间会被后续内容填补。如果固定元素原本位于页面内容中间，设置 fixed 后可能出现内容上移、布局错位的现象。一般建议给需要固定的 div 单独放在页面末尾或通过占位元素预留空间，避免遮挡正文。
下面是一个典型的右下角悬浮按钮示例，HTML 和 CSS 可以直接运行：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>fixed 固定示例</title>
<style>
body {
margin: 0;
min-height: 2000px;
font-family: sans-serif;
}
.fixed-box {
position: fixed;
right: 20px;
bottom: 20px;
width: 160px;
padding: 14px;
background: #2b6cb0;
color: #fff;
border-radius: 6px;
text-align: center;
}
</style>
</head>
<body>
<div class="fixed-box">固定在右下角</div>
<p>滚动页面查看效果，右下角按钮不会移动。</p>
</body>
</html>
这段代码中，.fixed-box 的 right: 20px 和 bottom: 20px 表示元素距离视口右侧和下边缘始终为 20px。无论页面滚动到哪个位置，按钮都不会离开这个区域。对比 position: absolute，后者是相对最近的已定位祖先元素定位，滚动时通常会跟着文档一起移动。
二、使用 position: sticky 实现滚动后固定
如果需求不是在页面一开始就固定，而是滚动到某个位置之后才固定，可以使用 position: sticky。粘性定位在触发阈值之前表现得像 relative，不会脱离文档流；当滚动方向上的偏移量达到设定值后，元素才表现出固定效果。与 fixed 不同的是，sticky 元素仍然保留原来的占位空间，不会导致后续内容突然上移。
使用 sticky 时必须设置 top、right、bottom 或 left 中的至少一个值，否则不会产生粘性效果。同时，sticky 元素的固定范围会受到父容器边界的限制：当父容器在滚动方向上被完全滚出视口时，sticky 元素也会跟着离开。这意味着它适合做吸顶导航栏、表格标题行等场景，而不是常驻悬浮按钮。
以下示例实现了一个吸顶导航栏：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>sticky 吸顶示例</title>
<style>
body {
margin: 0;
font-family: sans-serif;
}
.header {
position: sticky;
top: 0;
background: #f9a825;
padding: 12px;
text-align: center;
}
.content {
height: 1800px;
padding: 16px;
background: #f5f5f5;
}
</style>
</head>
<body>
<div class="header">吸顶导航栏</div>
<div class="content">向下滚动页面，导航栏会固定在视口顶部。</div>
</body>
</html>
当页面滚动到 .header 距离视口顶部小于等于 0 时，它会固定在顶部；继续向下滚动，它也不会离开，直到其父元素 <body> 的底部被滚过。与 fixed 相比，sticky 更温和，不会凭空覆盖内容，但在某些移动端浏览器上仍需注意兼容性前缀和父容器高度问题。
三、fixed 定位失效的常见原因与排查
实际开发中经常遇到这样的情况：给 div 写了 position: fixed，但滚动时元素仍然跟着页面移动。出现这种问题，通常并不是属性本身没有生效，而是 fixed 定位的包含块发生了变化。根据 CSS 规范，如果某个祖先元素设置了 transform、perspective、filter、will-change: transform 或 contain: paint 等属性，这个祖先元素就会成为 fixed 后代的包含块。换句话说，fixed 元素此时不再相对视口定位，而是相对于这个祖先元素定位。一旦祖先元素随着页面滚动，fixed 元素自然也会跟着移动。
下面是一个容易复现的失效案例：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>fixed 失效示例</title>
<style>
body {
margin: 0;
min-height: 2200px;
}
.parent {
transform: translateZ(0); /* 这一行会改变 fixed 的包含块 */
padding: 24px;
background: #e0e0e0;
margin-top: 80px;
}
.fixed-child {
position: fixed;
top: 20px;
left: 20px;
width: 140px;
padding: 12px;
background: #c62828;
color: #fff;
}
</style>
</head>
<body>
<div class="parent">
<div class="fixed-child">我原本想固定在左上角</div>
</div>
<p>滚动页面会发现，这个红色块并没有保持相对视口固定。</p>
</body>
</html>
排查这类问题时，可以借助浏览器开发者工具逐级检查祖先元素的 computed style，重点查看 transform、perspective、filter、will-change 和 contain 的值是否为初始值。如果确认是某个祖先造成的，最稳妥的修复方式是把 fixed 元素移动到该祖先之外，直接作为 <body> 的子元素；如果无法移动 DOM 结构，则考虑改用 position: sticky 或 position: absolute 结合 JavaScript 滚动监听来实现类似效果。
移动端还有一个需要注意的场景：在 iOS Safari 中，虚拟键盘弹出会改变视口尺寸，fixed 元素可能出现跳动或覆盖输入框的情况。针对这种问题，可以在输入框获得焦点时临时隐藏或调整固定元素的位置，避免影响操作体验。
四、移动端适配与实战建议
移动端使用固定定位时，不仅要考虑包含块问题，还要处理安全区、键盘弹出和层级遮挡。以底部悬浮按钮为例，建议为按钮设置 bottom: calc(20px + env(safe-area-inset-bottom))，这样在 iPhone 等带有底部指示条的设备上不会被遮挡。如果页面中有输入框，键盘弹出时可以把底部固定按钮暂时隐藏，或者改用 position: sticky 配合 top 实现吸底效果。
从结构上，尽量把需要固定的 div 放在 DOM 树的较浅层级，减少受深层祖先样式影响的概率。尤其是当项目使用 Vue、React 等框架时，组件嵌套较深，某个祖先组件为了动画效果加上 transform 或 opacity 后，很容易让内部 fixed 元素突然失去固定效果。此时可以借助 React Portal 或 Vue Teleport 把元素渲染到 <body> 下，再配合 fixed 定位，通常能稳定解决问题。
总结一下：需要元素始终可见、与视口绑定，选 position: fixed；需要滚动到某个位置后才吸附，选 position: sticky。无论使用哪种方式，都要关注祖先样式对定位上下文的影响，并在移动端做好安全区与键盘适配。理解了这些底层规则，div 不随滚动条移动的需求就能稳定落地。
CSS固定定位position fixedsticky定位修改时间：2026-09-28 06:52:19