Static 是元素默认的定位状态，严格遵循文档流，top/right/bottom/left 和 z-index 均被规范禁止生效；它不创建层叠上下文、不脱离文档流，显式声明也不会触发定位计算。
static 是什么？它不是“没设置”，而是明确的定位状态
所有元素默认的 position 值就是 static，但它常被误认为“不存在”或“不生效”。其实它是一个严格定义的行为：元素完全遵循文档流，top、right、bottom、left 和 z-index 对它完全无效——不是“不起作用”，而是被规范禁止使用。
常见错误现象：div { position: static; top: 20px; } 写了但毫无反应，开发者以为是 css 没加载，其实是 static 主动忽略这些属性。
-
static元素不会创建新的层叠上下文（即z-index无效） - 它不脱离文档流，后续元素的布局完全基于它的实际占据空间
- 即使你显式写
position: static，浏览器也当它是“回归默认行为”，不触发任何定位计算开销
为什么改用 relative 或 absolute 后布局就“乱了”？
一旦把 position 从 static 改成 relative 或 absolute，元素就脱离了“纯文档流”的约束逻辑。这不是 CSS “出 bug”，而是行为切换：
-
relative：仍占原文档流位置，但偏移后可能覆盖其他元素（因为z-index开始生效） -
absolute：完全脱离文档流，参照最近的非static祖先定位——如果所有祖先都是static，那就相对于初始包含块（通常是视口） - 容易踩的坑：忘了检查父容器是否意外设了
position: relative，结果子元素absolute定位锚点错位
怎么快速判断一个元素当前是不是 static？
别只看 CSS 文件里有没有写 position，浏览器 DevTools 显示的是最终计算值。打开 Elements 面板，选中元素，在 Styles 标签页里找 position 属性：
立即学习“前端免费学习笔记（深入）”；
- 如果显示为
static（灰色字体，带删除线），说明是默认值，未被显式覆盖 - 如果显示为
static（黑色字体），说明你写了position: static - 如果显示为空或
unset，需往上查继承链；但position不继承，所以空 = 默认static
实操建议：在调试布局错位时，先确认关键元素的 position 计算值，比盲目调 margin 更直接。
static 和 display: contents 的区别在哪？
两者都会让元素“视觉上消失”，但机制完全不同：
-
display: contents是让元素自身不渲染，但子元素继续参与文档流——它删掉了盒子本身，但没动定位模型 -
position: static是保留完整盒子，只是禁用偏移和层叠控制 - 性能影响：
display: contents可能触发更复杂的重排（尤其含表单控件时），而static几乎零开销 - 兼容性：
display: contents在旧版 safari 中支持差，static所有浏览器都行
真正容易被忽略的是：static 不是“被动等待被修改”的占位符，它是 CSS 定位模型里一个主动拒绝干预的稳定状态。想让它动，得先换角色——不是修它，是换它。