В рамках упражнения Coursera я пытаюсь показать одну и ту же фотографию в 5 разных позициях <div>. Хотя я использовал absolute позиционирование, кажется, что все фотографии расположены друг над другом.

Вот код, который я пытаюсь использовать в теге body:

      <div id="leftside"></div>
      <script type="text/javascript">
      var theLeftSide = document.getElementById("leftside");
      function generateFaces(){
        for (var i = 0; i < 5; i++) {
          photo = document.createElement("img");
          photo.src ="http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
              topPosition = Math.floor(Math.random()*401);
              leftPosition = Math.floor(Math.random()*401);
              photo.style.top =topPosition;
              photo.style.left =leftPosition;
              theLeftSide.appendChild(photo);
              console.log(i, topPosition, leftPosition);
            } // for
          } // function
          window.onload = generateFaces();
</script>
-2
user2804070 27 Май 2017 в 20:54

2 ответа

Лучший ответ

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

Попробуйте изменить на:

var  topPosition = Math.floor(Math.random()*401) +'px';
var  leftPosition = Math.floor(Math.random()*401) +'px';
                                                 // ^^ units needed
var theLeftSide = document.getElementById("leftside");

function generateFaces() {
  for (var i = 0; i < 5; i++) {
    var photo = document.createElement("img");
    photo.src = "http://home.cse.ust.hk/~rossiter/mooc/matching_game/smile.png";
    var topPosition = Math.floor(Math.random() * 401) + 'px';
    var leftPosition = Math.floor(Math.random() * 401) + 'px';
    //console.log()
    photo.style.top = topPosition;
    photo.style.left = leftPosition;
    theLeftSide.appendChild(photo);
    console.log(i, topPosition, leftPosition);
  } // for
} // function
window.onload = generateFaces;
img {
  position: absolute
}
<div id="leftside"></div>

Также обратите внимание, что window.onload = generateFaces(); неверно. Вы хотите передать функцию как ссылку, а не вызывать ее .... window.onload = generateFaces;

2
charlietfl 27 Май 2017 в 18:04

Родительский элемент (или некоторый предок ) должен иметь как минимум position: relative, чтобы его дочерние элементы position работали.

В этом ответе подробно объясняется: Абсолютное позиционирование и его родительский элемент

Поместите этот стиль на ваш объект:

<div id="leftside" style='position: relative;'></div>
0
Todor Simeonov 27 Май 2017 в 17:56