父元素未设flex，子元素却横向排列而非重叠的问题求助

我是前端新手，开发小型射击游戏时，向类名为cadre_Jeu的灰色div容器中通过appendChild()方法添加了两个img子元素。我通过JavaScript给它们设置了relative定位，期望两个子元素重叠，但实际它们却横向并排，而且第二个子元素似乎以第一个为定位参考，相关代码如下：

HTML代码 #

<div class="cadre_Jeu"></div>

CSS代码 #

.cadre_Jeu {
  height: 500px;
  width: 50%;
  background-color: #555;
  border: solid black 2px;
  cursor: crosshair;
}

JavaScript代码 #

let cadre_Jeu = document.querySelector('.cadre_Jeu');

let h_cadre = cadre_Jeu.offsetHeight;
let w_cadre = cadre_Jeu.offsetWidth;
let h_pistol = 150;
let w_pistol = h_pistol * 0.72;
//test1
let pistol = document.createElement('img');
pistol.id = 'pistol';
pistol.src = 'https://via.placeholder.com/200';
pistol.style.height = h_pistol + 'px';
pistol.style.width = w_pistol + 'px';

cadre_Jeu.appendChild(pistol);
pistol.style.position = 'relative';
pistol.style.left = w_cadre / 2 - w_pistol / 2 + 'px';
pistol.style.top = h_cadre / 2 - h_pistol / 2 + 'px';
//test1 end
//test2
let pistol2 = document.createElement('img');
pistol2.id = 'pistol2';
pistol2.src = 'https://via.placeholder.com/200';
pistol2.style.height = h_pistol + 'px';
pistol2.style.width = w_pistol + 'px';

cadre_Jeu.appendChild(pistol2);
pistol2.style.position = 'relative';
pistol2.style.left = w_cadre / 2 - w_pistol / 2 + 'px';
pistol2.style.top = h_cadre / 2 - h_pistol / 2 + 'px';
//test2 end

原因分析与解决办法 #

原因 #

position: relative的元素不会脱离文档流，它会保留自己原本在文档流中的占位空间，偏移量是基于自身原本的位置计算的。所以第一个图片占据了文档流中的位置，第二个图片默认排在它的右侧，之后各自偏移，最终呈现横向并排的效果。

解决办法 #

要实现元素重叠，需要使用position: absolute，同时给父容器设置position: relative作为定位参考：

1. 给父容器.cadre_Jeu添加position: relative，让绝对定位的子元素以它为参考基准
2. 将两个img的position从relative改为absolute，此时它们会脱离文档流，不再占据空间，偏移量基于父容器的左上角计算，自然就能重叠

修改后的CSS代码

.cadre_Jeu {
  height: 500px;
  width: 50%;
  background-color: #555;
  border: solid black 2px;
  cursor: crosshair;
  position: relative; /* 添加父容器的relative定位 */
}

修改后的JavaScript代码

let cadre_Jeu = document.querySelector('.cadre_Jeu');

let h_cadre = cadre_Jeu.offsetHeight;
let w_cadre = cadre_Jeu.offsetWidth;
let h_pistol = 150;
let w_pistol = h_pistol * 0.72;
//test1
let pistol = document.createElement('img');
pistol.id = 'pistol';
pistol.src = 'https://via.placeholder.com/200';
pistol.style.height = h_pistol + 'px';
pistol.style.width = w_pistol + 'px';

cadre_Jeu.appendChild(pistol);
pistol.style.position = 'absolute'; /* 改为absolute */
pistol.style.left = w_cadre / 2 - w_pistol / 2 + 'px';
pistol.style.top = h_cadre / 2 - h_pistol / 2 + 'px';
//test1 end
//test2
let pistol2 = document.createElement('img');
pistol2.id = 'pistol2';
pistol2.src = 'https://via.placeholder.com/200';
pistol2.style.height = h_pistol + 'px';
pistol2.style.width = w_pistol + 'px';

cadre_Jeu.appendChild(pistol2);
pistol2.style.position = 'absolute'; /* 改为absolute */
pistol2.style.left = w_cadre / 2 - w_pistol / 2 + 'px';
pistol2.style.top = h_cadre / 2 - h_pistol / 2 + 'px';
//test2 end

内容的提问来源于stack exchange，提问作者Macronaute