CSS - Установка изображения на div

Question

У меня есть аккордеон, и внутри этого аккордеона (jqueryui) есть таблица, которая имеет некоторые значения. Эти значения будут вставлены, и на основе этих значений я присвою ему цветную рамку. Например, ниже 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 большой.

Прилагаемое изображение показывает проблему, с которой я столкнулся. Зеленый, зеленый, красный и чтение установлены в таблице, но отображаются только красные. Я не так хорош CSS, извините за глупые вопросы.

Удалено положение абсолютное, и изображения отображаются правильно. Теперь они не выровнены. Как я могу их выровнять? См. Изображение.

Answer 1

Добавить position: relative на цветные квадраты. Таким образом, top: 10px повлияет на них снова.