dynamic generation of images with js : as a part of coursera exercise, I am trying to show the same photo at 5 different positions of a div tag. Although I used the `img {position: absolute;}`, all photos seem to be stacked above each other.

here is the code I am trying to use in the body tag:
 

          <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>

 I don't know what is the problem!

