position: relative 父元素才能使 absolute 子元素以它为定位上下文；top/left 相对于父元素内边距边缘；overflow: hidden 会裁剪 absolute 子元素；z-index 仅在同层叠上下文中生效。
父元素必须设 position: relative
子元素用 position: absolute 时，浏览器会向上查找**第一个定位上下文（containing block）**，而不是直接相对于 body。这个“第一个定位上下文”默认是初始包含块（即视口），除非父元素显式设置了 position 为 relative、absolute、fixed 或 sticky。
所以只给子元素加 absolute 是没用的——它根本不会认你写的那个父元素。
top/left 等偏移量是相对于父元素内边距边缘（padding edge）
一旦父元素有了 position: relative，子元素的 top: 10px 就表示“距离父元素上内边距边缘 10px”，不是边框边缘，也不是内容区顶部。这点容易被忽略，尤其当父元素有 padding 时，视觉位置可能和预期不一致。
- 父元素若有
padding: 20px，top: 0的子元素会出现在 padding 区内部，而非紧贴父元素上边框 - 若想对齐到父元素边框边缘，可设
box-sizing: border-box并把padding拆进内容逻辑里，或改用transform: translateY(-20px)补偿 -
right和bottom同理：它们参考的是父元素右/下内边距边缘
父元素不能有 overflow: hidden 且子元素超出时被意外裁剪
这是最常踩的坑：position: relative 本身不会创建新的层叠上下文或裁剪边界，但一旦父元素同时设置了 overflow: hidden（或 auto、scroll），它就会变成一个**块级格式化上下文（BFC）**，并裁剪所有溢出内容——包括 absolute 子元素。
- 即使子元素
z-index很高，只要超出父元素边界，就会被overflow: hidden切掉 - 调试时可用浏览器开发者工具临时删掉
overflow看是否恢复显示 - 如需保留滚动又不想裁剪，可将子元素提到父元素外（DOM 上级），用 JS 动态计算位置；或改用
position: fixed+ JS 同步滚动偏移（慎用）
层级和 z-index 只在同层叠上下文中生效
z-index 不是全局排序器。如果父元素没有 position（即未创建层叠上下文），子元素的 z-index 就无效；如果父元素自己有 z-index，那它的所有 absolute 子元素都只能在这个父层叠上下文内部排序。
立即学习“前端免费学习笔记（深入）”；
.parent {
position: relative;
z-index: 1;
}
.child {
position: absolute;
z-index: 999; /* 实际生效范围仅限于 .parent 这一层 */
}也就是说，哪怕子元素 z-index: 999，只要父元素 z-index: 1 被另一个 z-index: 2 的兄弟元素盖住，整个子元素都会被盖住——你调子元素的 z-index 没用。
父元素是否真正建立了定位上下文、是否意外触发了 BFC 裁剪、以及 z-index 的作用域层级，这三个点最容易在实际布局中引发“明明写了 absolute 却不按预期跑位”的问题。
