absolute定位在vertical-rl下top/right/bottom/left仍按物理方向解析，但其实际效果按逻辑方向重新映射：right指向inline-start（容器右侧），top仍指block-start（顶部），需配合显式height避免基准失效，优先使用margin-block-start等逻辑属性。
absolute定位在vertical-rl下top/right/bottom/left还按物理方向算吗
不按物理方向，而是按逻辑方向重新解释。设了writing-mode: vertical-rl后，top仍指块起始边（即顶部），但right不再指向屏幕右侧，而是指向内联起始边——也就是容器的右侧（因为vertical-rl的inline-start是右）。这意味着right: 0会让元素贴右，left: 0反而贴左，视觉上和横排一致；但top和bottom控制的是垂直位置，不受影响。
常见错误现象：
-
right: 10px把文字推到容器外左侧（误以为“右”是物理右） -
top: 20px看起来没生效（实际生效了，但因width/height语义翻转，容器高度塌缩导致“20px”超出可视区） - 用
transform: translateX(10px)想往右移，结果向左偏移（translateX仍按物理坐标系，不随writing-mode变化）
实操建议：
- 优先用逻辑方位属性：
margin-block-start替代top，margin-inline-end替代right，它们会自动适配当前writing-mode - 若必须用
top/right，先确认父容器有明确height（不是auto），否则top计算基准不可靠 - 避免混用
transform: translateX/Y和writing-mode，改用transform: translate()配合getComputedStyle动态判断主轴方向
position: absolute的宽高在vertical-rl里怎么设才不溢出
width和height在absolute子元素里依然互换语义——但仅当其包含块（containing block）也设了writing-mode: vertical-rl时才生效。如果只是子元素自己设writing-mode，它的width/height仍按自身坐标系解析，不会翻转。
关键点在于：绝对定位元素的尺寸参照系，取决于其包含块的writing-mode，而非自身。
实操建议：
- 若父容器已设
writing-mode: vertical-rl，则子元素的width控制的是它能向下延伸的距离（即“列高”），height控制的是它占多少水平空间（即“列宽”） - 子元素若同时设
white-space: nowrap，width可能失效（内容不换行，直接撑开） - 为防溢出，对
absolute子元素显式设max-width（对应视觉宽度）和max-height（对应视觉高度），比依赖width/height更稳 - 慎用
inset简写：inset: 10px在vertical-rl下等价于top: 10px; right: 10px; bottom: 10px; left: 10px，但right/left含义已变，容易误判
z-index和层叠上下文在writing-mode切换后会乱吗
不会。z-index和层叠上下文完全不受writing-mode影响——它只管绘制顺序，不管文本流向。但你可能会“感觉乱”，是因为absolute元素的位置偏移了，导致遮挡关系变化，不是z-index失效。
真正容易被忽略的是：当多个absolute元素共用一个vertical-rl父容器时，它们的top值如果相同，会严格按HTML顺序堆叠（top: 0的元素全挤在顶部一像素内），而不是像横排那样横向错开。
实操建议：
- 别依赖
top微调竖排元素间距，改用margin-block-start或inset-block-start - 若需精确控制层叠，给每个
absolute子元素加z-index，不要只靠文档流顺序 - 检查是否意外触发了新的层叠上下文（比如
opacity 、<code>transform非none），这比writing-mode更容易导致遮挡异常
IE9里-ms-writing-mode和absolute定位怎么配
IE9的-ms-writing-mode: tb-rl和现代writing-mode不是简单替换关系——它的absolute定位规则完全不同：top和left依然按物理方向，但right和bottom会被忽略，且width/height行为不可预测。
典型表现：position: absolute; right: 0;在IE9里无效，top: 50%计算基准是父容器的width而非height（反直觉）。
实操建议：
- IE9下放弃
right/bottom，统一用top和left+width/height手动计算位置 - 父容器必须设
display: inline-block或zoom: 1（触发hasLayout），否则absolute子元素无法正确锚定 - 用
@supports not (-ms-writing-mode: tb-rl)做渐进增强，把IE9样式单独抽离，避免层叠污染
writing-mode翻转的是整个布局坐标系，但absolute的定位属性名没变，开发者凭经验写的right: 0在竖排里可能刚好是对的，也可能完全反了——得看它参照的是哪个容器的流向。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
