无法让我的图片在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>

我的代码所得到的图像

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>

如果可以的话请重现，并附上链接。