left 和 right 同时设置能生效的前提是：position 必须为 absolute/fixed/sticky，且包含块有明确宽度；否则仅偏移不拉伸，常见失效原因是漏设定位或父容器未定义宽度。
left 和 right 同时设置不是“有问题”，而是有明确生效条件；写不生效，基本是因为没满足这两个前提：position 不是 absolute/fixed/sticky，或者包含块没有确定宽度。
为什么 left: 20px; right: 20px 没效果？
最常见原因就两个：
- 漏了
position: absolute（或fixed/sticky）——static或relative下，left/right只偏移，不拉伸 - 父容器没设
position: relative，导致包含块变成视口，但视口宽度可能被内容撑不开（比如空容器），结果元素“拉伸”到 0 宽
验证方法：在 DevTools 里看 computed 的 width 值。如果是 auto 且远小于预期，大概率是包含块宽度为 0 或未触发定位上下文。
left 和 right 共存时 width 怎么算？
当 position 正确、包含块宽度确定、且 width 为 auto 时，浏览器会按这个公式算：
width = 包含块宽度 − left − right − margin-left − margin-right
所以：left: 100px; right: 50px; 等效于 width: calc(100% - 150px)（前提是 margin 为 0）。但注意：
- 如果显式写了
width: 200px，它会被忽略，实际宽仍按上面公式算 - 如果
right是负值（如right: -10px），公式结果会超宽，可能引发横向滚动条（尤其 Safari） -
calc()放在right里（如right: calc(-100% + 20px)）会放大渲染误差，不推荐
想用 right 覆盖 left，但 left 还在生效？
在 LTR 文本方向下，left 的优先级高于 right。同时设两者，right 实际被忽略——这不是 bug，是规范行为。
解决办法不是“覆盖”，而是“清空”：
- 把
left设为initial（恢复默认值，即auto），再设right，就能生效 - 或者直接删掉
left声明，只留right和top/bottom
例如重写 Element UI 轮播指示器位置时：left: initial; right: 10px; 比 left: 9999px; right: 10px; 更干净可靠。
什么情况下别硬用 left + right？
这种写法适合固定尺寸+自适应区域的场景（如侧边栏 + 主内容区），但有硬伤：
- 子元素内容高度变化时，父容器不会自动撑高（absolute 元素脱离文档流）
- 响应式断点切换时，left/right 数值难动态适配，不如 flex/grid 灵活
- 嵌套层级深、祖先用了
transform时，containing block 会变，导致参考系意外偏移
真正要“自适应宽度”，优先考虑 flex 或 grid；只有浮层、弹窗、固定工具栏这类脱离流的场景，才值得用 left+right 拉伸——而且得盯紧包含块和 position 链。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
