JavaScript: использование marginLeft для позиционирования звездочек над изображением

Question

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

Для этого я использую:

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

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

Answer 1

Плагин устанавливает параметр example2 select для отображения: нет, поэтому любые изменения в нем не будут полезными.

Вы должны подать свой CSS прямо на

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

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

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

Но тогда оно будет ниже изображения, чтобы вы могли дать ему z-index

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/