当父容器设置 overflow-x: auto 时，内部 position: absolute 元素会随内容滚动；解决方法是改用 position: sticky 并调整 DOM 顺序，使固定元素位于内容之前，从而实现视觉上“悬浮于滚动区域右上角”的效果。
先给出结论——当父容器启用横向滚动后，指望 position: absolute 的固定元素像锚点一样纹丝不动？实际上它只会跟着滚动内容一起移动。更可靠的方案是采用 position: sticky，并将该元素提前放置在内容之前，这样才能让它稳定地“悬浮”在滚动区域的右上角。
这个问题的根源，可以从 position: absolute 的定位机制说起。它在 CSS 中的定位基准是最近已定位（non-static）的祖先元素。当你为 .container 设置 position: relative 后，.right 的 top: 0; right: 0 会自然地相对于它的边界——但核心在于：只要 .right 仍然处于 .container 的常规流中（即未脱离文档流），它就无法逃脱 overflow 的裁剪机制，并且它的位置不会因为滚动而被“锁定”。当容器开始横向滚动时，.right 虽然自身的坐标没有变化，但由于它并未脱离滚动的上下文，在视觉上就会随内容一同偏移——尤其是当内容高度远超容器时，.right 甚至可能被完全滚出可视区域。
✅ 正确解法：使用 position: sticky
sticky 是一种混合定位模式——滚动之前它像普通的 relative 元素，一旦到达你设定的阈值（例如 top: 0），它就会像 fixed 一样附着在视口或最近的块级容器边缘。要让 .right 始终固定在容器右上角（不随横向滚动而移动），需要满足两个条件：
- DOM 顺序必须前置：
.right必须写在可滚动内容（如）之前，否则sticky会依据后续内容的布局位置来计算它的粘性临界点，导致结果异常； - 正确设定粘性锚点：
right: 0配合top: 0能确保它始终紧贴容器右上角（注意：sticky的right/bottom行为取决于容器尺寸和书写模式，此处假设采用默认的 LTR 布局）。
下面是完整的代码示例：
Right should not scroll
Long text to force scrollbars...
.container { background: #eee; position: relative; /* 保持相对定位，便于 sticky 锚定 */ overflow-x: auto; overflow-y: hidden; /* 可选：避免意外纵向滚动干扰 */ height: 100px; width: 300px; /* 建议显式设置宽度，便于测试横向滚动 */}.right { position: -webkit-sticky; /* Safari 兼容 */ position: sticky; top: 0; right: 0; /* 移除 float: right —— sticky 无需浮动，且浮动会破坏 sticky 行为 */ background: #007bff; color: white; padding: 4px 8px; font-size: 14px; z-index: 10; /* 确保层级高于滚动内容 */}⚠️ 注意事项：
sticky在 Firefox、Chrome、Edge（≥79）、Safari（≥15.4）中均有良好支持，但较旧版本的 Safari 需要添加-webkit-前缀；- 千万不能给
.right添加float——它与sticky互斥，一旦使用定位就会失效； - 如果
.container没有明确的宽度，right: 0可能无法精确对齐到最右边缘，建议为容器设置width或max-width； - 若必须兼容 IE 这类老旧浏览器，只能借助 JavaScript 监听 scroll 事件，通过动态更新
position: fixed配合transform进行模拟——但在现代项目中，sticky才是最优选择。
总结来说，position: absolute 在可滚动容器中无法实现“固定”效果，而 position: sticky 是一种语义正确、性能高效且无需编写 JavaScript 的解决方案。只需记住两个要点：将元素放在前面，正确设置锚点，滚动容器中的固定布局即可轻松实现。
