相对位置偏移错误

Question

I have this markup.

<div class="row">
    <div class="col-md-4">
        <img src="imgsrc.jpg" />
    </div>
</div>

<div class="row">
    <div class="col-md-4">
        <img src="imgsrc.jpg" />
    </div>
</div>

With .col-md-4 has relative position, when I try to attach mouseover event to the .col-md-4 and get position of its offset it's return wrong offset for second .col-md-4 in second row. Here is the script

$('.col-md-4').hover(function(){
    var offset = $(this).position();
    var height = $(this).height();
    console.log(offset); // this gives the wrong offset when hovering over second col-md-4 in second row
    $('#shadow2').stop(true, true).animate({
        'left': offset.left,
        'top': offset.top + height + 10
    });
}, function(){
    $('#shadow2').animate({
        'left': '-350px'
    });
});

Answer 1

try using .offset() , it gives position of element relative to document, change

var offset = $(this).position();

to

var offset = $(this).offset();

Update::

$('.col-md-4').hover(function(){
    var childPosition = $(this).offset();
    var parentPosition = $(this).parent().offset();
    var actualOffset = {
        top: childPosition.top - parentPosition.top,
        left: childPosition.left - parentPosition.left
    }
    var height = $(this).height();
    console.log(offset);
    $('#shadow2').stop(true, true).animate({
        'left': actualOffset.left,
        'top': actualOffset.top + height + 10
    });
....