CSS-将图像设置为div

我有手风琴，手风琴里面有一张桌子，上面有一些值。 将插入这些值，并根据这些值为其指定一个彩色框。例如，低于30%时为红色，高于80%时为绿色。我想在课堂上布置图片。因此，在Javascript中，我可以动态插入一个类，例如redBox和div获取该图像

因为某种原因，我不明白。。。图像相互重叠。。。例如，最后一个div分配了一个红色div，而第一个div分配了绿色div。而显示为红色

这是HTML：

<div style="height:20px;overflow:visible" id="networkingIndexCollapsible" class="accordionmodsindexing">
         <h3 style="text-align: right"> <span id="scenarioIndex">Some data</span></h3>
            <div>                           

                 <table class="indexingOptions" >
                     <tr>
                                <td>Networking Index:</td>
                                <td><div id="netIndex">Some data<div id="netIndexSquare" class="greenSquare"></div></div></td>
                              </tr>
                              <tr>
                                <td>- Supplier Index:</td>
                                <td><div id="suppIndex">Some data<div id="supIndexSquare" class="greenSquare"></div></div></td>
                              </tr>
                              <tr>
                                <td>- Deliver Index:</td>
                                <td><div id="delIndex">Some data<div id="delIndexSquare" class="redSquare"></div></div></td>
                              </tr>
                              <tr>
                                <td>- Product Index:</td>
                                <td><div id="proIndex">Some data<div id="proIndexSquare" class="redSquare"></div></div></td>
                              </tr>
                        </table>
            </div>
       </div>
 <div> I am just an empty div</div>

图像的大小为8x8px

所附图片显示了我面临的问题。 表中设置了绿色、绿色、红色和read，但它仅显示红色。 我不太擅长CSS，很抱歉问了一些愚蠢的问题

移除绝对位置，图像正确显示。现在，它们没有对齐。如何对齐它们？请看图片。

---

添加

位置：相对于彩色方块。这样，
top:10px
将再次影响它们。
因为您使用的是
position:absolute。你能检查一下这些图像是否相互重叠吗？你是对的。我已经删除了绝对值，图像显示正确。现在我有另一个问题。我无法将图像对齐。请看一看图片，如果删除
float:right？
.redSquare
{
display: inline!important;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(../img/redsquare.png) no-repeat;  
height: 20px;  
padding-left: 55px;
float: right;   
top: 10px;
left: 209px;
position: absolute;
}
.greenSquare
{
display: inline!important;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(../img/greensquare.png) no-repeat;  
height: 20px; 
padding-left: 55px;
float: right;   
top: 10px;
left: 209px;
position: absolute;
 }
.orangeSquare
  {
display: inline!important;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(../img/orangesquare.png) no-repeat;  
height: 20px; 
padding-left: 55px;
float: right;   
top: 10px;
left: 209px;
 position: absolute;
 }