Randomly positioning an absolute element in a div using java script

Hello I am new to javascript so I apologize if this is silly however, I am creating a generator that displays a .png for each letter of the alphabet. The goal is to overlap and display multiple images inside of a div, with random positions. So far I am able to display images for each letter on top of one another by creating a random z-index, however I can not figure out how to alter the positioning to random for each picture.

I attempted to create a Math.floor random variable called randomThingTwo to alter the top positioning of the images, but this did not work.

Please help!

here is my current code:

var x,y,splitted;

function generate() {

x = document.getElementById("form1");
        y = x.elements["message"].value;
        var text = [y];
        var joined = text.join();
        var res = joined.toLowerCase();
        var regexp = /[A-z]/g;
         splitted = res.match(regexp);

        var words = [];

        judge();
    }


    var counter = -1;


    function judge() {
        if (counter < y.length) {
            counter++;

            art();
    }
}


    function art() {
        img = new Image(splitted[counter] + '.png');
        var picture = document.getElementById("pic");
        var img = document.createElement('img');
        var randomThing = Math.floor((Math.random() * 10) + 1);
            console.log(randomThing);

// var randomThingTwo = Math.floor((Math.random() * 20) + 1);

        img.setAttribute("src", splitted[counter]+".png");
        img.style.zIndex= randomThing;
        img.style.position= "absolute";

// img.style.position.marginTop = randomThingTwo;

img.setAttribute("width", "304");
img.setAttribute("width", "328");

picture =  document.getElementById("pic").appendChild(img);




            setTimeout(function () {
                judge();
            }, 100);
    }