position: inherit 仅继承父元素计算后的 position 值，不改变定位基准链；它适用于动态切换定位类型或规避 css 变量限制，但在 ie8 及以下不支持，且继承 static 时子元素无法使用偏移属性。
position: inherit 不是“妙用”，而是明确的继承行为——它让子元素直接复用父元素的 position 值，不经过任何计算或转换。这点常被误认为能“智能适配定位上下文”，实际它只做一件事：把父元素声明的 position 值（比如 relative、absolute 或 fixed）原样塞给子元素。
为什么不能靠 position: inherit 解决嵌套定位基准问题
常见误解是：给子元素设 position: inherit 就能让它“自动跟着父元素的定位类型走”，从而避免手动写 relative 或 absolute。但现实是：
- 如果父元素是
position: static（默认），inherit也会继承static→ 子元素立刻失去top/left等偏移能力 - 如果父元素是
position: fixed，子元素继承后也变成fixed→ 它将脱离父容器，直接相对于视口定位，而不是“在父容器内固定” -
inherit不改变定位基准链，它只是复制值；真正决定absolute元素参考谁的，是祖先中第一个非static的元素 —— 这个逻辑和inherit无关
position: inherit 真正适用的两个场景
它只在明确需要“保持定位类型一致性”且父元素本身已脱离 static 时才有意义：
-
动态主题或组件库中统一控制定位层级：父容器通过 JS 切换
position: relative/position: absolute，内部所有子元素用inherit同步，省去逐个更新类名 -
规避 CSS 自定义属性无法穿透
position的限制：CSS 变量不能直接用于position属性，但你可以用position: inherit+ 父级 class 控制，例如：.modal--scrollable { position: relative; }，子元素写position: inherit即可随模式切换
IE 和旧浏览器兼容性必须检查
position: inherit 在 IE8 及更早版本完全不支持，IE9–IE11 支持但存在渲染 bug（尤其与 z-index 混用时）。如果你的项目仍需兼容 IE，就别用它——直接显式声明 position: relative 或 position: absolute 更可靠。
最易被忽略的一点：inherit 继承的是**计算后的值**，不是声明值。如果父元素的 position 是通过层叠（比如多个规则）最终算出 absolute，子元素继承的就是这个结果；但如果父元素没显式设 position，它就是 static，继承后照样无效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
