background-position 由自身及 background-origin、background-attachment 共同决定，与 position 属性无关；默认原点为 padding-box 左上角，百分比值表示背景图与容器对应锚点对齐，非位移。
background-position 不是通过 style.position 控制的——这是两个完全无关的机制。背景图定位由 background-position 自身决定，和元素的 position（如 relative、absolute）没有直接关系。
为什么改了 style.position 却没影响背景图位置？
因为 background-position 的参考系是元素自身的盒模型（默认从 padding-box 左上角起算），不是由 position 属性触发的层叠或偏移逻辑。哪怕你把元素设成 position: absolute，只要没动 background-position 值，背景图就纹丝不动。
-
position影响的是**元素在文档流中的布局位置或堆叠层级**，不是它内部背景图的锚点 - 真正控制背景图起始点的只有：
background-position、background-origin、background-attachment - 误以为要配
position: relative才能让background-position生效？错——它对static元素也完全有效
background-position 的坐标原点在哪？
默认是 padding-box 的左上角，不是内容区（content-box），也不是边框外沿（border-box）。这意味着：如果元素有 padding: 20px，又写了 background-position: 0 0，背景图左上角会紧贴内边距内侧，而不是文字左上角。
- 想让背景图从内容区左上角开始？加
background-origin: content-box - 想从边框左上角算？用
background-origin: border-box - 多背景图时，每个
background-position值都对应各自background-origin的原点
百分比值不是“移动图片”，而是“对齐锚点”
background-position: 30% 70% 的意思是：把背景图自身宽高的 30% 和 70% 那个点，对齐到元素 padding-box 宽高的 30% 和 70% 那个点。它不是“向右走 30%，向下走 70%”。
-
0% 0%→ 背景图左上角对齐容器padding-box左上角（默认） -
100% 100%→ 背景图右下角对齐容器padding-box右下角 -
50% 50%→ 背景图中心点对齐容器中心点（最稳的居中写法） - 混用单位合法：
background-position: left 10px表示水平靠左、垂直向下偏移 10px
关键词组合只有 9 种合法写法
规范只承认 left/center/right 和 top/center/bottom 的两两组合，共 9 种。比如 right top 合法，top right 虽多数浏览器能渲染，但 CSS 验证器报错；right bottom center 这种三词写法无效。
- 只写一个关键词（如
background-position: right）→ 水平右对齐，垂直自动为center - 关键字不能加引号，也不能出现在字符串拼接里（如 JS 动态设置时别写成
"'right'"） - 和
background-repeat: no-repeat搭配时，单关键词容易造成“以为贴边了，其实垂直是居中的”错觉
最容易被忽略的其实是 background-origin 的默认行为——它不声不响地把计算起点定在 padding 内侧，而设计师常默认“从文字左上角起算”。调位置前先确认这个原点，省掉一半调试时间。
