position: static 是元素的默认定位状态，不参与定位计算、不脱离文档流、忽略 top/left 等偏移且不触发新层叠上下文；显式声明仅用于重置或增强可读性，视觉效果与未声明 position 完全一致。
static 是 CSS 定位的“归零键”——它不参与定位计算，也不影响文档流，唯一作用就是让元素彻底回归默认行为。
为什么设置 position: static 有时没效果？
因为它是所有元素的初始值，浏览器根本不会为它生成新的定位上下文，也不会改变元素在文档流中的位置。你手动写上它，只是显式覆盖了父级或之前样式中可能存在的 position: relative、position: absolute 等声明。
- 常见错误现象：
position: static写了但top/left还在生效 → 实际是其他规则（比如继承、层叠）在起作用，static下这些偏移属性会被忽略 - 使用场景：组件库中重置某个子元素的定位状态；CSS-in-JS 动态切换定位时需要明确“退回到默认”
- 性能影响：无额外开销，比
relative或absolute更轻量，不触发合成层创建
static 和不写 position 有区别吗？
视觉和布局行为完全一致，但 CSS 层叠逻辑里它们属于不同来源：不写是“未声明”，position: static 是“显式声明”。这会影响 specificity 和 !important 的判定。
- 如果父元素设了
position: relative，子元素没写position，它仍是static，不会成为absolute的定位参考 - 用 JavaScript 检查
getComputedStyle(el).position，两者都返回"static" - 在 CSS 预处理器或 BEM 命名中，显式写
position: static可增强可读性，表明“此处刻意不参与定位”
解除 absolute 或 relative 后，元素还会脱离文档流吗？
不会。只要变成 static，元素立刻回到文档流中原本的位置，原来占的空间恢复，后续元素也会重新排列。
立即学习“前端免费学习笔记（深入）”；
- 典型坑：用 JS 切换
position: absolute → static后，页面“跳动” → 因为元素从脱离文档流变回正常流，高度/位置重算 - 兼容性：所有浏览器都支持，无需前缀
- 注意：仅改
position不够，如果之前还设置了top/right等偏移，要一并清空（它们在static下无效，但残留声明可能干扰调试）
真正容易被忽略的是：static 不是“无定位”，而是“非定位”——它不建立定位上下文，也不接受偏移，连 z-index 都会失效（除非同时设了 opacity 或 transform 等触发层叠上下文的属性）。
