本文详解为何 `img` 元素默认以行内方式排列导致“意外并排”，并提供两种可靠方案：将子元素设为 `position: absolute`（推荐），或手动调整 `relative` 定位偏移量，确保多图精准叠加于同一坐标。
在开发射击类小游戏时，你可能会希望多个游戏对象（如两把枪图标）精确重叠在画布中央，而非水平排列。但实际运行后却发现它们“肩并肩”出现——这并非 JavaScript 逻辑错误，而是 CSS 渲染机制的典型表现。
根本原因在于：<img> 是原生 inline 元素。即使你用 style.position = 'relative' 并设置相同的 left/top 值，浏览器仍会按文档流顺序为其分配基线位置，并保留其 inline 特性（如受空白符、换行影响），导致第二个元素紧随第一个之后渲染，而非真正覆盖。
✅ 正确解法一（推荐）：使用 position: absolute
将子元素脱离文档流，使其完全基于父容器定位：
pistol.style.position = 'absolute'; pistol.style.left = (w_cadre / 2 - w_pistol / 2) + 'px'; pistol.style.top = (h_cadre / 2 - h_pistol / 2) + 'px'; pistol2.style.position = 'absolute'; pistol2.style.left = (w_cadre / 2 - w_pistol / 2) + 'px'; pistol2.style.top = (h_cadre / 2 - h_pistol / 2) + 'px';
⚠️ 关键前提：父容器 .cadre_Jeu 需设置 position: relative（作为绝对定位的“包含块”），否则 absolute 将相对于最近已定位祖先或 <body>：
.cadre_Jeu {
position: relative; /* 必加！ */
height: 500px;
width: 50%;
background-color: #555;
border: solid black 2px;
cursor: crosshair;
}✅ 解法二（备选）：坚持 relative，但手动抵消文档流偏移
若因特殊需求必须保留 relative，需主动计算第二个元素的“回退距离”——即减去前一个元素的宽度（- w_pistol），使其左边缘与第一个对齐：
pistol2.style.left = (w_cadre / 2 - w_pistol / 2 - w_pistol) + 'px';
但此方式脆弱：一旦元素尺寸变化、添加 margin/padding 或存在隐藏空白节点，极易错位，不建议用于生产环境。
? 总结建议：
- 对所有需精确定位、叠加、动画的游戏 UI 元素（如角色、子弹、UI 图标），统一采用 position: absolute + 父容器 position: relative；
- 避免依赖 relative 实现重叠，因其本质仍是文档流内偏移，非真正层叠；
- 在动态创建元素后立即设置 position，再设置 left/top，防止样式未生效导致初始闪烁。
如此，你的两把枪图标就能稳稳居中、完美重合，为后续碰撞检测与交互打下坚实基础。
