Tenho elementos que se sobrepõem e gostaria de evitar isso. Aqui está uma foto:http: //grab.by/cB7

Além disso, aqui está o CSS para esses elementos:

.navigationItem {
    background: #808080;
    -webkit-border-radius: 360px;
    padding: 1.0em;
    text-decoration: none;
    color: #fff;
    position: absolute;
    -webkit-box-shadow: 0px 2px 5px #909090;
    font-weight: bold;
    text-shadow: 1px 1px 2px #707070;
    font-size: 1.0em;
}

E aqui estão eles no HTML:

<a href="#" class="navigationItem" id="nav0">play</a>
<a href="#" class="navigationItem" id="nav1">register</a>
<a href="#" class="navigationItem" id="nav2">our blog</a>
<a href="#" class="navigationItem" id="nav4">contact us</a>
<a href="#" class="navigationItem" id="nav5">about us</a>
<a href="#" class="navigationItem" id="nav6">our rules</a>`

Como você pode ver, estou usando-os como links com estilo simples usando o HTMLa tag. A razão de suas posições serem absolutas é porque as estou movendo usando jQuery:

function moveAll() {

    for(var i = 0; i < AMOUNT; i++) {
        var random = Math.random() * 500;
        $("#nav" + i).animate({"left": random + i + "px"}, "slow");
        $("#nav" + i).animate({"top": random + i + "px"}, "slow");
    }
}

Quando eles se movem, porém, às vezes se sobrepõem, o que é irritante. Como posso impedir que eles se sobreponham? Obrigado por seus esforços