zufällige Position der Elemente innerhalb der Eltern div

Question

Ich habe schwimmende RANDOM Elemente innerhalb DIV, variierende LINKS und TOP-Position innerhalb der Eltern <div class="main"></div>.

<div class="main"></div> 

Javascript:

for (var i = 0; i < 5; i++) { 
    $('.main').append('<div class="box"></div>'); 
} 
$('.box').each(function(index) { 
    $(this).css({ 
    left : ((Math.random() * $('.main').width())), 
    top : ((Math.random() * $('.main').height())) 
    }); 
}); 

Beispiel: https://jsfiddle.net/iahmadraza/u5y1zthv/ Wie zu berechnen und LEFT und TOP Positionen mathematisch in Javascript/jQuery so jede beliebige Element jenseits Grenze definiert Mutter

HTML gehen gesetzt werden NICHT

Vielen Dank

Answer 1

Die .box Elemente an 100px Höhe und Breite festgelegt, so zu erreichen, was Sie brauchen, entfernen Sie diese Dimension aus dem möglichen Zufallswert Maximum:

$(this).css({ 
    left: Math.random() * ($('.main').width() - $(this).width()), 
    top: Math.random() * ($('.main').height() - $(this).height()) 
}); 

Updated fiddle