position: absolute 脱离文档流，定位参照物为最近的 position 非 static 祖先，否则以 viewport 为基准；应给直接父容器设 position: relative；现代布局优先用 flex/grid + position 微调，慎用 inline-block/float；sticky 需满足可滚动、有偏移值、无独立层叠上下文三条件；display: contents 可视觉移除中间层实现跨层定位，但不支持 IE 且丢失盒模型样式。
position: absolute 会脱离文档流，但父容器没设 position 会找错参照物
很多人用 position: absolute 时发现元素飞到页面左上角或位置完全不对，根本原因是它往上逐级查找第一个 position 值为 relative、absolute、fixed 或 sticky 的祖先元素作为定位上下文。如果所有祖先都没设，就以 document（即 viewport）为基准。
解决办法很简单：给直接父容器加 position: relative（通常最安全，不改变布局流）。
- 不要只写
position: absolute就完事，检查父级是否已有定位上下文 - 避免对
body或html直接设position: relative，可能影响全局滚动或第三方组件 - 若父容器本身是 flex 或 grid 容器，加
position: relative不影响其内部布局逻辑
display: inline-block 和 float 都已过时，优先用 flex 或 grid 配合 position
display: inline-block 有看不见的空白符间隙，float 必须清除浮动且语义混乱——这两个方案在现代布局中基本只剩兼容老项目的价值。真正该组合的是 display: flex / display: grid 主结构 + position 微调局部。
比如下拉菜单、气泡提示、固定侧边栏等场景：
立即学习“前端免费学习笔记（深入）”；
- 主区域用
display: flex划分 header / main / aside，结构清晰、响应式友好 - 在
main内部某个按钮旁叠加操作面板，才用position: absolute+top/right精确锚定 -
绝对定位元素的
z-index要和 flex 容器的 stacking context 对齐，必要时给父容器加position: relative和z-index
position: sticky 的兼容性和触发条件经常被忽略
position: sticky 看似简单，但实际生效需要同时满足三个条件：父容器有可滚动区域、自身有 top（或 bottom）偏移值、且不能处于 overflow: hidden 或 transform 创建的独立 stacking context 中。
常见失效场景：
- 父容器没设
max-height或height+overflow: auto，导致无法滚动 →sticky不触发 - 给 sticky 元素的父级加了
transform: translateZ(0)（常见于动画优化），会创建新层叠上下文，使 sticky 失效 - Safari 旧版本（≤15.4）对
sticky在 flex 容器中的支持不稳定，建议加align-self: flex-start显式声明对齐
用 display: contents 配合 position 可绕过 DOM 层级限制
当 HTML 结构受限（比如框架生成的 wrapper div 无法删除），又想让某个子元素相对于更外层定位时，display: contents 是个隐蔽但有效的工具：它让该元素“视觉上消失”，子元素直接成为父容器的子项，同时保留语义和可访问性。
例如：
.wrapper {
position: relative;
}
.skip-layer {
display: contents;
}
.skip-layer > .target {
position: absolute;
top: 10px;
right: 10px;
}
这样 .target 就能直接相对于 .wrapper 定位，而不用改 HTML。注意：display: contents 不支持 IE，且会让该元素的 background、border、padding 等样式失效 —— 它真的只是“抽掉这一层盒子”。
复杂点在于，一旦用了 contents，你就得重新校验焦点管理、伪元素（::before/::after 也会消失）、以及某些 JS 依赖 offsetParent 的逻辑是否还成立。
