absolute定位在RTL下用left/right错位，因二者是物理方向属性，不随文本流向变化：LTR时left指向屏幕左、right指向屏幕右，RTL时仍保持该映射，而用户期望的是逻辑起始侧（RTL下应为视觉右侧，即内联起始侧），故需用inset-inline-start等逻辑属性替代。
为什么 absolute 定位在 RTL 下用 left/right 会错位
因为 left 和 right 是物理方向属性，不随文本流向变化。当页面设为 RTL（如 dir="rtl"），right: 10px 仍强制把元素贴到视口**物理右侧**，而用户期望的是“贴内联起始侧”——即 RTL 下的**左侧**（视觉上是右边，但逻辑上是内容开始的地方）。这不是浏览器 bug，是属性设计本意如此。
-
left永远指向屏幕左边，right永远指向屏幕右边，和direction无关 - RTL 用户看到的“右上角”按钮，在逻辑上其实是“内联结束侧 + 块起始侧”，不是“物理 right + top”
- Flex/Grid 的
justify-content: flex-end在 RTL 下会自动翻转，但position: absolute不会
用 inset-inline-start 替代 left/right 的实操要点
inset-inline-start 是 position: absolute 的逻辑定位入口，它根据父容器的 direction 和 writing-mode 动态映射：LTR 下等于 left，RTL 下等于 right。但它的生效有前提：
- 父级必须声明
direction: rtl或dir="rtl"（推荐直接写在上） - 不能只靠
lang="ar"或 JS 后续加dir—— CSS 解析时这些还没生效 - 若需兼容 Safari ≤16 或旧版 Android WebView，得回退到
[dir="rtl"] .btn { right: 8px; } - 不要混用：
.btn:dir(rtl)和[dir="rtl"] .btn优先级相同，调试时容易互相覆盖
为什么写了 dir="rtl" 但 inset-inline-start 还没反应
最常见原因是方向上下文没传递下去。CSS 逻辑属性依赖祖先节点的书写模式计算，而 direction 是继承属性，但它不会自动从 流到所有子元素，除非中间没被重置。
- 检查是否某层父容器显式写了
direction: ltr或dir="ltr"，这会截断继承链 - 避免在组件库根节点（如
.ant-layout）上覆盖direction，第三方库常假设 LTR - 用浏览器开发者工具的“Computed”面板看目标元素的
direction值，确认是否为rtl - 如果用了 SSR，确保服务端模板输出的
被真实注入，而不是靠客户端 JS 补
图标翻转、边距、滚动条等连带问题怎么同步处理
定位只是冰山一角。RTL 下整个布局链都会受影响，单改 inset-inline-start 不够：
立即学习“前端免费学习笔记（深入）”；
- 图标镜像必须用
:dir(rtl) { transform: scaleX(-1); }——margin-inline-start等逻辑属性无法替代 - 表单控件（如
<input>）的光标、Tab 键序、占位符对齐，只靠 CSS 修不好，必须才能触发 Unicode 双向算法 - 滚动条位置（macOS/iOS RTL 系统下应在左侧）由系统+
dir共同决定，CSS 无法强制 - 混合语言文本（如 “File ٢٠٢٤”）要用
unicode-bidi: isolate或<bdi></bdi>包裹，否则数字仍按 LTR 渲染
direction 被覆盖，就全盘失效。 
