absolute定位需配合top/right/bottom/left生效，参考最近非static祖先，z-index仅对定位元素有效且受堆叠上下文限制，慎用于响应式主体布局。
absolute 定位必须配合 offset 属性才生效
只写 position: absolute 不会改变元素位置，它只是脱离文档流，但默认偏移量为 0 —— 元素会“卡”在原来文档流中的位置（视觉上可能没变化，实际已脱离）。真正控制位置靠的是 top、right、bottom、left 这四个 offset 属性。
常见误操作：
- 只设
position: absolute，没写任何top/left，以为能“固定住”，结果元素消失或叠错位 - 写了
top: 20px却没设left，元素水平方向仍按原位置“残留”，容易和其它元素重叠
定位参考系是最近的 position 非 static 祖先
absolute 元素不会相对于 viewport 定位，而是找离它最近的、position 值为 relative、absolute、fixed 或 sticky 的祖先元素。如果找不到，才退到初始包含块（通常是视口）。
典型问题场景：
立即学习“前端免费学习笔记（深入）”；
- 父容器没设
position: relative，子元素top: 0; left: 0却飞到页面左上角 —— 因为参考系跳到了或根元素 - 中间某层祖先用了
position: absolute，意外截断了参考链，导致下级定位偏移不可预期 - 用
transform移动了父容器，但没改position值（仍是static），子元素absolute依然不以它为参考
z-index 只对定位元素有效，且需注意堆叠上下文
z-index 要起作用，元素必须是定位元素（即 position 不是 static）。但即使设了 z-index，也可能被“无视”——因为创建了新的堆叠上下文。
容易踩的坑：
- 给
absolute元素设了z-index: 999，但它父容器有opacity: 0.99或transform: translateZ(0)，导致父级成了堆叠上下文边界，子元素的z-index只在父内生效 - 两个同级
absolute元素，一个设z-index: 10，另一个没设（默认auto），后者会显示在前者下面 ——auto的堆叠层级低于任何数字值 - 用
fixed和absolute混搭时，它们属于不同类型的定位上下文，z-index比较需统一参考系
absolute 布局不适合响应式内容流，慎用于主体结构
absolute 把元素完全踢出文档流，后续元素会“看不见”它，也不受其尺寸影响。这在做弹窗、图标标注、装饰性浮层时很合适；但用来排版正文、导航栏、卡片列表等，会立刻带来维护灾难。
真实项目中暴露的问题：
- 文字换行后高度变化，
absolute定位的“标题栏”没跟着撑开，内容被遮挡 - 移动端缩放或字体增大，
left: 50%+transform: translateX(-50%)居中失效，因为百分比基于父宽，而父宽可能未设或随视口变化 - 用
absolute模拟 grid 布局，结果无法响应屏幕旋转、无障碍阅读器抓取顺序错乱、打印样式全乱
需要精确像素控制时，优先考虑 transform + relative，或用 grid/flex 的 place-items、align-self 等现代方案；absolute 真正该用的地方，是那些“不该参与布局计算”的辅助性元素。
