CSS - 将图像设置为 div

Question

我有 Accordion ， Accordion (jqueryui) 里面有一张 table ，上面有一些值。这些值将被插入，并且基于这些值，我将为其分配一个彩色框。例如，低于 30% 是红色，高于 80% 是绿色。我想在类里面分配图像。所以在 Javascript 中我可以动态插入一个类，例如 redBox 和 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>

这是 CSS:

.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;
 }

图片大小为 8x8px。

所附图片显示了我面临的问题。表中设置了green, green, red, read，但是只显示红色的。我不太擅长 CSS，很抱歉提出愚蠢的问题。

删除了绝对位置，图像可以正常显示。现在，他们没有对齐。我怎样才能对齐它们？请看图片。

Answer 1

将 position: relative 添加到彩色方 block 。这样 top: 10px 将再次影响它们。