Получить положение плавающих элементов внутри переполненного div

Question

У меня есть div (MainDiv) с переполнением и статической шириной и высотой.Этот div загружает HTML-контент, используя AJAX.Эти html представляют собой несколько блоков div с CSS-свойством float: left, поэтому MainDiv можно прокручивать влево и вправо.Каждый блок имеет одинаковую фиксированную ширину

Маленький пример:

<div id="MainDiv">
<div class="Block" style="float: left;" id="Block1">Content #1</div>
<div class="Block" style="float: left;" id="Block1">Content #2</div>
<div class="Block" style="float: left;" id="Block1">Content #3</div>
...
<div class="Block" style="float: left;" id="BlockN">Content #N</div>
</div>

Как я могу получить позицию относительно MainDiv одного из div.Block, используя jQuery?Например, мне нужно получить позицию # Block10 относительно MainDiv.

Answer 1

Использование jQuery:

var pos = $('#Block10').offset();
$('#Block10').append('X=' + (pos.left - $('#MainDiv').offset().left) + '<br />');
$('#Block10').append('Y=' + (pos.top - $('#MainDiv').offset().top) + '<br />');