任意位置的形状-碰撞

Question

我试图在div部分的任意位置放置3个形状

https://jsfiddle.net/nerh2o13/

如何避免形状之间的碰撞？

$('section').each(function() {
        for (var i = 1; i < 4; i++) {
            $(this).append('<div class="shape number-0'+i+'"></div>');
        }
});

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