javascript - How to dynamically shift a DIV down based on predecessor -

i've got series of divs, same class (.ms-acal-item). i'm trying position of each one, compare 1 above it, , shift down if needed. correct issue on sharepoint 2013 calendar event tiles overlapping. here's code far:

$(function() {     $('.ms-acal-item').each(function(i, obj) {     var tile = jquery(this);     var prev = tile.prev();     var prevpos = prev.position();     var tilepos = tile.position();     var curtop = parseint(tilepos.top);     var newtop = parseint(prevpos.top) + 30;     if(curtop !== newtop){     tile.css('top', newtop);     }    });  }); 

and here's example of sharepoint-generated content looks like:

each tile 20px high , positioned absolutely in-line. need compare position of each tile predecessor , move down 30px if isn't there (20px tile , 10px between them). far it's not working - code seems have no effect on tile positions.

what doing wrong?

there problem in logic, while processing first element not have previous element, need ignore , few typo(variable case issues) mistakes in code. below revamp code.(to see changes effect changed style top margin-left, correct afterwards)

$(function() {    $('.ms-acal-item').each(function(i, obj) {     var tile = $(this);     var prev = tile.prev();     if (typeof prev.position() !== "undefined") {         var prevpos = json.parse(json.stringify(prev.position()));         var tilepos = json.parse(json.stringify(tile.position()));         var curtop = parseint(tilepos.top);         var newtop = parseint(prevpos.top) + 30;         if(curtop !== newtop){         tile.css('margin-left', newtop);         }     }    });  });