absolute定位弹出框需设直接父容器为relative，否则基准为视口导致错位；relative不改变布局但提供定位上下文；top/left/right/bottom组合决定锚点位置。
absolute 定位弹出框必须设父容器为 relative
直接对弹出框元素用 position: absolute 无效，因为它的定位基准是最近的「已定位祖先元素」（即 position 值为 relative、absolute、fixed 或 sticky 的父级）。没找到就回退到初始包含块（通常是视口），导致弹出框飘到页面左上角。
正确做法是给弹出框的直接父容器（比如一个 div 包裹层）加 position: relative，不改变布局流，但为子元素提供定位上下文：
<div class="popup-container"> <div class="popup">我是弹出内容</div> </div>
.popup-container {
position: relative;
}
.popup {
position: absolute;
top: 10px;
left: 20px;
}
top/left/right/bottom 的组合决定锚点位置
弹出框常需“相对于触发按钮右下角”或“居中于屏幕”，这时不能只靠 top 和
。常见组合有：</p> <ul> <li>右下角弹出：<code>top: 100%; right: 0;（注意：100% 是相对于父容器高度，不是按钮自身）
left: 50%; bottom: 10px; transform: translateX(-50%);
top: 50%; left: 50%; transform: translate(-50%, -50%);
top: 20px; right: 20px;（此时父容器应为 body 或设 position: fixed）注意：transform 是修正偏移的关键，否则 left: 50% 指的是左边缘到中点，不是盒子中心对齐。
立即学习“前端免费学习笔记（深入）”；
z-index 不生效？检查堆叠上下文和层级顺序
弹出框被遮挡，大概率是 z-index 生效条件没满足：
-
z-index只对「已定位元素」（position不是static）有效 - 父容器创建了新的堆叠上下文（如设置了
opacity: 0.99、filter、will-change等），会截断子元素的 z 层级传播 - 兄弟元素的
z-index值比弹出框低，但它的父容器堆叠上下文层级更高
最稳妥做法：给弹出框容器设 position: absolute + z-index: 1000，并确保其父容器没有意外创建堆叠上下文。必要时在 body 下直接挂载弹出框 DOM 节点，绕过深层嵌套带来的层级干扰。
滚动时弹出框错位？优先用 fixed 替代 absolute
如果弹出框需要始终贴着视口（比如通知气泡、菜单），而父容器会滚动，用 position: absolute 会导致它随父容器一起滚动。此时应改用 position: fixed：
.popup {
position: fixed;
top: 20px;
right: 20px;
}
但要注意：fixed 的坐标系是视口，不再受父容器 transform、scroll 或 overflow 影响；同时它会脱离文档流，可能遮挡其他 fixed 元素，需统一管理 z-index 范围。
真正难处理的是「既跟随某个元素又不随滚动偏移」——这种场景往往得监听 scroll 和 resize，动态计算 top/left，或者用 position: sticky 配合容器约束，但兼容性和行为稳定性不如 fixed + 手动定位。
