仅靠 position: sticky 无法实现相对于父容器的右上对齐；必须为父元素设置 position: relative，才能让 right 属性在 sticky 定位中生效。
仅靠 `position: sticky` 无法实现相对于父容器的右上对齐；必须为父元素设置 `position: relative`，才能让 `right` 属性在 sticky 定位中生效。
CSS 中的 position: sticky 是一种混合定位模式——它本质是“相对定位”与“固定定位”的结合体：元素在视口内滚动时，会像 fixed 一样粘附在指定偏移位置（如 top: 0），但其定位参考系仍是其最近的、具有定位上下文（positioned ancestor）的祖先元素。关键点在于：sticky 元素的 left/right/top/bottom 偏移值，只有在父容器建立了定位上下文时，才具备相对于该父容器边缘的参照意义。
默认情况下，父容器 .container 的 position 为 static（即无定位上下文），此时 right: 25px 在 sticky 行为中会被忽略或表现异常——浏览器仅响应 top: 0（触发粘性吸附），而 right 不起作用，导致元素始终靠左对齐。
✅ 正确做法：为 .container 显式添加 position: relative：
.container {
position: relative; /* ✅ 关键声明：创建定位上下文 */
margin: 150px auto;
width: 250px;
height: 200vh;
border: 2px solid #333;
}
.stickybox {
position: sticky;
top: 0;
right: 25px; /* ✅ 现在 right 相对于 .container 右边界生效 */
width: 150px;
height: 150px;
background-color: royalblue;
}
⚠️ 注意事项：
- position: relative 本身不改变元素布局位置（无偏移时），仅用于创建定位上下文，安全可靠；
- sticky 元素的 right 或 left 必须配合 top/bottom 使用才有意义（单一 right 不会触发粘性行为）；
- 若父容器设置了 overflow: hidden/auto/scroll，可能意外截断 sticky 效果，需确保父容器溢出可见；
- 浏览器兼容性：现代主流浏览器均支持 sticky，但 IE 完全不支持，需按项目需求评估降级方案。
? 总结：position: sticky 的“粘性”由 top/bottom 触发，而“横向定位”（left/right）则依赖父级定位上下文。牢记「sticky 需要 positioned ancestor 来支撑偏移定位」这一原则，即可精准控制其在父容器内的最终落点。
