right: 0 未生效是因为仅对 position: absolute、fixed 或 sticky 元素有效，且需父容器设 position: relative 等非 static 值以提供定位上下文，否则参考系错位。
right: 0 为什么没让元素靠右？
因为 right 只对 position: absolute、fixed 或 sticky 元素生效，而默认 position: static 下写 right: 0 完全被忽略——浏览器直接当无效声明处理。
更常见的情况是：写了 right: 0，但元素依然卡在左边。这不是语法错误，而是定位上下文缺失或干扰导致的“参考系错位”。
- 父容器没设
position: relative（或其它非static值），absolute元素会一路向上找，最终以body或视口为包含块，right: 0就变成贴浏览器右边缘，而非你预期的容器右边缘 - 父容器有
transform、filter或will-change，会隐式创建新包含块，使right: 0的参考对象变成那个带transform的祖先，而不是你写的父容器 - 父容器本身宽度不可计算（比如
width: auto且内部无内容撑开、或被float塌陷），导致包含块宽度退化为最小内容宽，right: 0计算后位置“正确但不可见”
检查 offsetParent 是谁最直接
打开 DevTools → 选中该元素 → 切到「Computed」面板 → 搜索 offsetParent。它显示的是当前实际作为定位参考的元素。如果显示为 body 或某个意外的祖先，就说明你写的父容器根本没被认作定位上下文。
此时不要猜，直接在父容器上加一句：
立即学习“前端免费学习笔记（深入）”；
.parent {
position: relative;
}然后刷新再看 offsetParent 是否变成它。这是验证是否“被跳过”的最快方式。
right: 0 生效但元素被裁剪或偏移
即使 right: 0 已生效，也可能看不见效果，常见于：
- 父容器设了
overflow: hidden，而absolute元素的右边缘刚好压在 padding box 边界外，直接被裁掉 - 父容器有
padding-right，但right: 0是从 content box 右边缘起算，结果元素右边缘贴到了 padding 区内，视觉上像“没靠右” - 父容器用了
box-sizing: border-box，但忘了border-right或padding-right也占空间，right: 0实际锚定的是 border 外边缘，可能造成轻微溢出
临时排查建议：给父容器加 outline: 1px solid red，观察元素是否真的在右边界上；再把 overflow 改成 visible 看是否突然出现。
right 和 left 同时设才可能拉伸，单写 right: 0 不影响宽度
right: 0 只控制右边界位置，不改变元素自身宽度。如果你期望它“填满右侧剩余空间”，必须同时设 left: 0（或明确宽度），否则元素仍按内容宽渲染，只是右边缘被钉住而已。
例如：
.item {
position: absolute;
right: 0; /* 只钉右边界 */
width: 200px; /* 宽度固定，左边缘浮动 */
}这不会让它靠右“撑开”，只会让整个 200px 宽的盒子右对齐。真要弹性占位，得这样：
.item {
position: absolute;
left: 0;
right: 0; /* 两者都设，宽度由浏览器反推 */
}但注意：这要求父容器有可计算宽度，且子元素不能声明 width（否则覆盖自动计算）。
真正麻烦的从来不是 right: 0 写错了，而是你不知道它正对着谁算——这个“谁”，必须显式声明，不能靠结构或视觉去猜。
