getting the position of a floated element

Question

I have some code like this:

<style>
.box {
    width: 100px;
    height: 100px;
    margin: 10px;
    background: green;
    border: 1px solid black;
    float: left;

}

#wrapper {
    position: relative;
}
</style>


<div id="wrapper">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box">6</div>
</div>

I need to get the left,top of each of the boxes relative to #wrapper. I'm trying to do this through jQuery.position() however, I am not getting the right results. Keep getting 0,0. Can anybody else. I think the problem here is floats... if these were absolutely positioned, I would be reading them correctly.

Answer 1

Here some jQuery code which will alert the left position. This works with floating well.

$(function() {
    $('#wrapper div').each( function( index, item ) {
            alert( $(this).position().left);
    });
});

here a jsFiddle: http://jsfiddle.net/ytGYS/