JavaScript: использование marginLeft для определения рейтинга звезд над изображением

Question

Я использую плагин JavaScript для применения звезд рейтинга для обзора. У этого [fiddle] есть большая часть кода. Звезды появляются на месте выпадающего (внешний ресурс не загружается, чтобы показать это в скрипке). Звезды показывают тонкое на локальном хосте, но я хотел расположить звезды, чтобы они появлялись где-то посередине (или, может быть, над самим изображением, где бы ни было).

Для этого, я делаю использование:

$(function() { 
    var _elm=document.getElementById('example2'); 
    _elm.style.marginLeft = "150px"; 
     $('#example2').barrating({ 
     theme: 'fontawesome-stars', 
     readonly: true, 
     initialRating: 3 
     });  
}); 

Но звезды не меняют свою позицию. Как мне позиционировать звезды? Для завершения консольных ошибок нет.

Answer 1

Плагин устанавливает пример2 для отображения: none, Так что любые изменения на нем не будут полезны.

Вы должны яблочного ваш CSS непосредственно

.br-theme-fontawesome-stars .br-widget 

Например, вы можете дать ему

margin-left:20px; 
    margin-top:-50px; 

Но тогда это будет реветь изображение таким образом, вы можете дать ему Z-индекс

z-index:100; 

, после чего вы увидите изменения на стрелках.

Окончательный результат будет:

.br-theme-fontawesome-stars .br-widget { 
    height: 28px; 
    white-space: nowrap; 
    margin-left:20px; 
    margin-top:-50px; 
    z-index:100; 
} 

скрипки - https://jsfiddle.net/omwpz0tw/12/