Случайное позиционирование абсолютного элемента в div с использованием java-скрипта

Question

Привет, я новичок в javascript, поэтому извиняюсь, если это глупо, однако я создаю генератор, который отображает .png для каждой буквы алфавита. Цель состоит в том, чтобы перекрывать и отображать несколько изображений внутри div, со случайными позициями. Пока я могу отображать изображения для каждой буквы друг на друга, создавая случайный z-индекс, однако я не могу понять, как изменить позиционирование на случайное для каждого изображения.

Я попытался создать случайную переменную Math.floor под названием randomThingTwo, чтобы изменить верхнее расположение изображений, но это не сработало.

Пожалуйста, помогите!

вот мой текущий код:

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); 
} 

Answer 1

При установке свойств таким образом, вам нужно включить 'px' позже, в противном случае он не знает, какие блоки использовать с числом вас» повторно прошел. Попробуйте изменить вторую строчку на img.style.marginTop = randomThingTwo + 'px';