Why do the elements not appear in random places but they are staying aligned on top of the div?

The code is supposed to generate 5 elements one by one so that when the page is downloaded all we`ll see 5 elements (newFace) in random places.

This code generates all 5 elements but they are staying aligned one by one instead of appearing in random position as wished

function generate_faces() {
    var theLeftSide = document.getElementById("leftSide");
    var number_of_faces = 0;
    while (number_of_faces < 5){
        var top_position = Math.floor(Math.random()*300);
        var left_position = Math.floor(Math.random()*300);
        newFace = document.createElement("img");
        newFace.setAttribute(
          "src",
          "http://ift.tt/1GzZEsa"
        );
        newFace.style.top = top_position+"px";
        newFace.style.left = left_position+"px";
        theLeftSide.appendChild(newFace);
        number_of_faces = number_of_faces + 1;
    }
}