I have elements which are overlapping and I would like to prevent this. Here is a picture:

Also, here is the CSS for those elements:

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

And here they are in the 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>`

As you can see, I am using them as simple styled links using the HTML a tag. The reason that their positions are absolute is because I am moving them using 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");
    }
}

When they move, though, they sometimes overlap which is annoying. How can I prevent them from overlapping? Thank you for your efforts.

I have elements which are overlapping and I would like to prevent this. Here is a picture: http://grab.by/cB7t

Also, here is the CSS for those elements:

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

And here they are in the 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>`

As you can see, I am using them as simple styled links using the HTML a tag. The reason that their positions are absolute is because I am moving them using 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");
    }
}

When they move, though, they sometimes overlap which is annoying. How can I prevent them from overlapping? Thank you for your efforts.

• javascript
• jquery
• html
• css
• overlapping

• @user156629 They are being positioned at random. – Tim Commented Jun 10, 2011 at 6:45
• @Robert Koritnik Thank you for correctly formatting my snippets - I realized I used the single line symbols instead of block snippets, however it said because I am a new user I cannot post more than 2 hyperlinks. – Tim Commented Jun 10, 2011 at 6:46
• 1 If you're going to position them absolutely and randomly assign them positions, then you're going to need some relatively plex logic to make sure your moveAll function doesn't position them over each other. It will need to determine if any other elements bounding box will be overlapped by the next element it moves to it's determined location, choose another position if it does, and check again until it finds an unused area. Are you asking for the function logic to do this? – kinakuta Commented Jun 10, 2011 at 6:51
• No worries. that's why we're here (more seasoned users). To help. – Robert Koritnik Commented Jun 10, 2011 at 7:32

2 Answers 2

Removing position:absolute would render them side by side.

JSFiddle

But if the whole point is to scatter them around randomly, then you will have to keep track of positioned elements and take that into account when calculating their position. You should save each link's position and calculate every next link's position according to previous already positioned links. There's simply no other way when you want random positions and non overlapping.

Final non-overlapping solution

This is a working example of non-overlapping functionality. If you'd want your links to not even touch, you should change < to <= and > to >= in the if statement condition.

Relevant code

var positions = [];
$(".navigationItem").each(function(){
    var ctx = $(this);
    var dim = {
        width: ctx.outerWidth(),
        height: ctx.outerHeight()
    };
    var success = false;

    // repeat positioning until free space is found
    while (!success)
    {
        dim.left = parseInt(Math.random() * 300);
        dim.top = parseInt(Math.random() * 300);
        var success = true;

        // check overlapping with all previously positioned links
        $.each(positions, function(){
            if (dim.left < this.left + this.width &&
                dim.left + dim.width > this.left &&
                dim.top < this.top + this.height &&
                dim.top + dim.height > this.top)
            {
                success = false;
            }
        });
    }
    positions.push(dim);
    ctx.animate({
        left: dim.left,
        top: dim.top
    }, "slow");
});

You can change the position value to relative.

See my example : http://jsfiddle/NmmX6/2/

I changed your loop so that it isn't id dependent :

function moveAll() {
    $('.navigationItem').each(function(i,e){
        var rdm = Math.random() * 500;
        $(e).animate({"left":rdm + "px"}, "slow");
        $(e).animate({"top": rdm + "px"}, "slow");
    });
}

I tested it and did not find one case where it actually overlaps, but check it out.