必须给触发元素设position: relative作为定位锚点，否则absolute悬浮框会相对于body错位；应配合top: 100%、left: 0、transform: translateX(100%)实现稳定右下定位，并通过max-width、min-width、RTL适配和focus-within保障响应性与可访问性。
为什么直接给悬浮框设 position: absolute 会错位
因为 absolute 元素的定位基准是「最近的已定位祖先」，不是视觉上的父容器。如果多语言切换按钮（比如一个 <button class="lang-toggle">）没设 position: relative，它的悬浮框就会相对于 <body> 定位——结果就是：按钮在页面右侧，提示框却飘到左上角，甚至被滚动截断。
必须显式给触发按钮加一层 position: relative 包裹，或直接设在按钮自身上（前提是它不依赖其他布局流）：
<div class="lang-toggle-container"> <button class="lang-toggle">EN</button> <div class="lang-tooltip">中文 / 日本語 / 한국어</div> </div>
.lang-toggle-container { position: relative; } —— 这行不能省，否则后续所有 top/left 都失去参照系。
如何让悬浮框始终出现在按钮右下方且不越界
默认右下角定位用 top: 100% + left: 100% 不够稳：按钮宽度变化、文字换行、RTL 语言都会导致偏移不准。更可靠的是用 top: 100% + left: 0 + transform: translateX(100%)，再配合 white-space: nowrap 防止换行撑宽：
立即学习“前端免费学习笔记（深入）”；
.lang-tooltip { position: absolute; top: 100%; left: 0; transform: translateX(100%); margin-top: 4px; }- 若需箭头指向按钮右边缘，用伪元素 +
border技巧：.lang-tooltip::before { content: ""; position: absolute; top: -4px; right: 8px; width: 0; height: 0; border: 4px solid transparent; border-bottom-color: #333; } - 移动端点击区域小，建议把
.lang-toggle-container的padding或min-width设足，避免误触
hover 和 focus 状态下怎么避免闪动或焦点丢失
纯 CSS 悬浮框在键盘导航（Tab 切换）时容易失效，因为 :hover 不响应 :focus。只靠 :hover 会导致屏幕阅读器用户或键盘用户看不到提示。
正确做法是同时监听两种状态：
.lang-toggle-container:hover .lang-tooltip,
.lang-toggle-container:focus-within .lang-tooltip {
opacity: 1;
visibility: visible;
}
关键点：
- 给容器加
tabindex="0"，让它能获得焦点：<div class="lang-toggle-container" tabindex="0"> -
.lang-tooltip初始必须设opacity: 0; visibility: hidden;，且两者 transition 要配对，否则会出现「先闪一下再淡入」 - 不要用
display: none控制显隐——它会切断可访问性树，屏幕阅读器读不到
多语言文本长度差异大，怎么防止悬浮框被截断或溢出
中日韩文字通常比英文短，但某些语言（如德语）词特别长，容易撑破固定宽的悬浮框。硬设 width: 200px 是最常见翻车点。
解决方案是放弃固定宽，改用内容自适应 + 最大宽度限制：
-
.lang-tooltip { min-width: max-content; max-width: 280px; }——max-content让它按最长语言项自动伸展，max-width防止超长词溢出视口 - 加
overflow-x: auto和scrollbar-width: none（Firefox）或::-webkit-scrollbar { display: none; }隐藏滚动条，保持 UI 干净 - 字体大小统一用
rem，避免某些语言因字号缩放异常导致布局错乱
真正麻烦的不是定位逻辑，而是当用户从英文切到阿拉伯语（RTL）时，left: 0 会变成「贴右对齐」。这时候得靠 [dir="rtl"] .lang-tooltip { right: 0; left: auto; transform: translateX(-100%); } 动态翻转，否则箭头和文字都会反向错位。
