刚学css那会，我一直觉得 position 很简单：不就是 relative、absolute、fixed 几个值嘛，写个弹窗、搞个角标，分分钟搞定。
直到有一天，我在写一个小demo时，想让一个按钮固定在右下角，结果它莫名其妙地跟着某个滚动区域动了起来。我一脸懵：fixed 不是应该固定在屏幕上吗？怎么“失效”了？
那一刻我才意识到，position 远没有表面看起来那么简单。于是，我决定彻底搞明白它。
从“回归文档流”说起：static 真的只是“默认值”吗？
我们都知道，position: static 是所有元素的默认值。它意味着元素老老实实待在文档流里，不响应 top、left 这些偏移属性。
但你有没有试过把一个已经 absolute 的元素再改回 static？你会发现，它“消失”了——准确地说，是重新回到了文档流中的原始位置。
这其实是个很有用的技巧。比如在一个动态组件中，你想根据某个状态决定是否脱离文档流：
.popup {
position: absolute;
top: 10px;
right: 10px;
}
.popup.hidden {
position: static; /* 回归文档流，不占空间也不显示 */
}
虽然实际中我们更多用 display: none，但这个例子说明：static 不是“什么都不做”，而是明确地选择不参与定位。
relative：看似无害，实则关键
relative 本身不会让元素脱离文档流，它只是“相对于自己原来的位置”做偏移。比如：
.box {
position: relative;
left: 20px;
}
这个 .box 会向右移动 20px，但它原来的位置依然被占据着，后面的元素不会“挤”上来。
但 relative 最重要的作用，其实是为 absolute 提供“定位上下文”。
想象一下，你想在一个卡片的右上角加个“新”标签。如果不用 relative，absolute 会一直往上找，直到 <body>，导致定位失控。
<div class="card">
<span class="new-tag">NEW</span>
卡片内容
</div>
.card {
position: relative; /* 关键！创建包含块 */
}
.new-tag {
position: absolute;
top: -5px;
right: -5px;
background: red;
}
这个 relative 看似无足轻重，实则是整个定位体系的“锚点”。没有它，absolute 就像断了线的风筝。
absolute 和 fixed：你以为的“绝对”可能并不绝对
absolute 是相对于最近的非 static 定位祖先。如果没有，才相对于 <body>。这一点很多人知道，但容易忽略嵌套场景。
而 fixed 才是真正的“坑中之坑”。
我们常说 fixed 是相对于视口，所以滚动时它不动。但有一个例外：当它的祖先元素应用了 transform、perspective 或 filter 时，fixed 会失效。
.container {
transform: translateZ(0); /* 开启硬件加速 */
}
.fixed-btn {
position: fixed;
bottom: 20px;
right: 20px;
}
你会发现，.fixed-btn 不再固定在屏幕右下角，而是跟着 .container 一起滚动。
为什么？因为 transform 会创建一个新的“包含块”，fixed 不再相对于视口，而是相对于这个 transformed 容器。
这个问题在移动端特别常见，比如我们为了开启硬件加速，会给根容器加 translateZ(0)，结果导致所有 fixed 元素都“失灵”了。
解决方案：
- 把
fixed元素移到transform容器之外； - 或者用
position: sticky+top: 100vh - height模拟； - 在 React/Vue 中，可以用
Portal把元素挂载到body下。
sticky：最“智能”的定位方式
sticky 是我近几年用得越来越多的属性。它像 relative 一样参与文档流，但当滚动到某个阈值时，又表现得像 fixed。
.nav {
position: sticky;
top: 0;
background: white;
z-index: 10;
}
只要页面一滚动到 .nav 距离顶部 0 的位置，它就会“吸”在顶部不动。
它比用 JavaScript 监听 scroll 事件优雅多了，性能也更好，因为完全是浏览器原生实现。
有趣的是，sticky 的参照系是最近的滚动容器。比如在一个 overflow-y: auto 的 <div> 里，sticky 元素会相对于这个 div 吸附，而不是整个页面。
这让我想起 IntersectionObserver。两者都能实现“元素进入视口时触发行为”，但：
sticky是纯 CSS，简单直接；IntersectionObserver更灵活，可以做懒加载、分页、动画触发等复杂逻辑。
它们不是替代关系，而是互补。
性能优化：为什么我总爱用 transform: translate3d(0,0,0)？
你可能在很多代码里见过这行 CSS：
.element {
transform: translate3d(0, 0, 0);
}
它啥也不做，却能让动画更流畅。为什么？
因为这行代码会触发 GPU 硬件加速，浏览器会为这个元素创建一个独立的图层（Layer），由 GPU 负责合成。这样在做 transform 或 opacity 动画时，不需要重排（reflow）或重绘（repaint），只需要“合成”（composite），性能极高。
但注意：图层不是越多越好。每个图层都会占用内存，过多图层会导致内存压力和合成开销。
所以，我一般只在这些场景用：
- 登录弹窗的入场动画
- 轮播图切换
- 高频交互的 UI 元素
更优雅的方式是用 will-change：
.modal {
will-change: transform, opacity;
}
告诉浏览器：“我马上要动这个属性了，请提前优化”。但记得在动画结束后移除它，避免长期占用资源。
最后一点思考
position 看似只是布局工具，但它背后连接着整个浏览器的渲染机制：文档流、包含块、图层合成、重排重绘……
真正掌握它，不只是记住五个值的用法，而是理解：
- 元素如何脱离文档流？
- 定位的参照系是如何确定的？
- 什么情况下会触发重排？如何避免？
现在回看那个“fixed 失效”的 bug，我已经不再困惑。因为我知道，每一个看似奇怪的行为，背后都有其逻辑。
而我们的成长，就是不断把这些“奇怪”变成“理所当然”。
如果你也在 position 上踩过坑，欢迎在评论区分享。共勉。
