position不是布局工具，而是用于脱离文档流的精确锚定，仅适用于下拉菜单、气泡提示等满足不参与主内容流、需相对参照物对齐、由交互触发且生命周期短的场景。
定位（position）不是布局工具，而是脱离文档流的干预手段
用 position: absolute 或 position: fixed 做整页结构布局，几乎必然导致后续维护困难：元素位置依赖父容器尺寸、层级易冲突、响应式适配成本高、无障碍支持弱。浏览器默认文档流才是稳定布局的基础，position 应只用于明确需要“脱离流 + 精确锚定”的功能场景，比如下拉菜单、气泡提示、返回顶部按钮。
哪些功能元素适合用 position？看三个典型条件
满足以下全部条件时，才考虑用定位：
- 该元素不参与主内容流排版（如遮罩层、浮层、快捷操作按钮）
- 它的位置必须相对于某个已知参照物（如
position: relative的父容器）动态对齐 - 它的出现/隐藏由交互触发，且生命周期短（如 hover 展开、click 弹出）
反例：header、main、footer 这类结构性容器，不该靠 top/left 手动拼位置；应该用 flex、grid 或常规 margin/padding 控制。
position: absolute 必须搭配 position: relative 的父容器
否则会向上逐级查找最近的定位祖先，最终落到 <html> 根节点，造成意料外的偏移。常见错误是直接给子元素设 absolute，却忘了给其逻辑父级加 relative。
立即学习“前端免费学习笔记（深入）”；
.dropdown-trigger {
position: relative; /* 关键：提供定位上下文 */
}
.dropdown-menu {
position: absolute;
top: 100%;
left: 0;
min-width: 200px;
}注意：relative 本身不改变元素位置，只创建新的定位上下文——这是很多人忽略的前提。
避免用 top/left 模拟 margin，尤其在响应式中
用 top: 20px 替代 margin-top: 20px 看似一样，实则破坏文档流，导致后续元素无法感知该空间，容易重叠或错位。更危险的是，在媒体查询中修改 top 值，往往要同步调整所有相关定位值，而 margin / gap / padding 天然支持流式响应。
真正需要定位的场景，优先用 transform: translate() 微调位置（不触发重排），或结合 inset（现代写法）替代四方位属性：
.tooltip {
position: absolute;
inset: auto 0 0 auto; /* 比 top/right/bottom/left 更简洁 */
transform: translateX(-50%);
}最常被忽略的一点：定位元素的 z-index 不是孤立存在的，它只在同一个 stacking context 内生效。父容器一旦有 opacity、transform、filter 等属性，就会创建新 stacking context，导致子元素的 z-index 失效——这时光调数字没用，得检查整个祖先链的渲染上下文。
