无法让我的 html 图像以我想要的方式显示和定位

Question

我想要做的是将三张图片放在同一个位置，但我无法让它们对齐。 图像也不会加载，我还没有找出原因，因为它们具有正确的名称和路径。

<h5 id="energyWorkers" style="display:none">Energy workers</h5>
    <div style="position:relative">
        <img id="energyWorkersProgressBackground" scr="‪Assets\loading-bar-background.jpg" style="width:10%;height:52px;position:relative;top:0;left:0">
        <img id="energyWorkersBar" scr="‪Assets\loading-bar-fill-pur.jpg" style="width:10%;height:15px;position:absolute;top:0;left:5">
        <img id="energyWorkersProgressFrame" scr="‪Assets\loading-bar-background.jpg" style="width:10%;height:52px;position:absolute;top:0;left:0">
    </div>
    <button onclick="setWorkerJob('energy', 1)" id="energyWorkers+" style="display:none;float:left">+</button>
    <button onclick="stopWorkerJob('energy', 1)" id="energyWorkers-" style="display:none">-</button>
</div>

images of what I am getting with my code

Answer 1

如下给出 div 和图像的相对 z 索引。

<h5 id="energyWorkers" style="display:none">Energy workers</h5>
<div style="position:relative; z-index:-1">
    <img id="energyWorkersProgressBackground" scr="‪Assets\loading-bar-background.jpg" style="width:10%;height:52px;position:relative;top:0;left:0; z-index:1">
    <img id="energyWorkersBar" scr="‪Assets\loading-bar-fill-pur.jpg" style="width:10%;height:15px;position:absolute;top:0;left:5; z-index:1">
    <img id="energyWorkersProgressFrame" scr="‪Assets\loading-bar-background.jpg" style="width:10%;height:52px;position:absolute;top:0;left:0; z-index:1">
</div>
<button onclick="setWorkerJob('energy', 1)" id="energyWorkers+" style="display:none;float:left">+</button>
<button onclick="stopWorkerJob('energy', 1)" id="energyWorkers-" style="display:none">-</button>

如果可以，请复制并附上链接。