Obtenir la position/position de l'élément par rapport à un conteneur parent?

element.offsetLeft et element.offsetTop sont de la pure propriétés javascript pour la recherche d'un élément de la position à l'égard de ses offsetParent; étant le plus proche parent de l'élément à une position de relative ou absolute

Sinon, vous pouvez toujours utiliser Zepto pour obtenir la position d'un élément ET sa mère, et il suffit de soustraire les deux:

var childPos = obj.offset();
var parentPos = obj.parent().offset();
var childOffset = {
    top: childPos.top - parentPos.top,
    left: childPos.left - parentPos.left
}

Cela a l'avantage de vous donner le décalage d'un enfant par rapport à son parent, même si le parent n'est pas positionné.

J'ai fait comme ça dans Internet Explorer.

function getWindowRelativeOffset(parentWindow, elem) {
    var offset = {
        left : 0,
        top : 0
    };
    //relative to the target field's document
    offset.left = elem.getBoundingClientRect().left;
    offset.top = elem.getBoundingClientRect().top;
    //now we will calculate according to the current document, this current
    //document might be same as the document of target field or it may be
    //parent of the document of the target field
    var childWindow = elem.document.frames.window;
    while (childWindow != parentWindow) {
        offset.left = offset.left + childWindow.frameElement.getBoundingClientRect().left;
        offset.top = offset.top + childWindow.frameElement.getBoundingClientRect().top;
        childWindow = childWindow.parent;
    }

    return offset;
};

===================
vous pouvez l'appeler comme cela

getWindowRelativeOffset(top, inputElement);

Je me concentre sur IE uniquement que par mon accent, mais des choses peuvent être faites pour les autres navigateurs.

Exemple

Ainsi, si nous avons un enfant de l'élément avec un id de "l'enfant de l'élément" et nous voulons avoir un c'est à gauche/en haut de la position relative d'un élément parent, dire un div qui avait une classe de "élément-parent", nous aimerions utiliser ce code.

var position = $("#child-element").offsetRelative("div.item-parent");
alert('left: '+position.left+', top: '+position.top);

Plugin Enfin, pour la mise en plugin (avec quelques notes expalaining ce qui se passe):

//offsetRelative (or, if you prefer, positionRelative)
(function($){
    $.fn.offsetRelative = function(top){
        var $this = $(this);
        var $parent = $this.offsetParent();
        var offset = $this.position();
        if(!top) return offset; //Didn't pass a 'top' element 
        else if($parent.get(0).tagName == "BODY") return offset; //Reached top of document
        else if($(top,$parent).length) return offset; //Parent element contains the 'top' element we want the offset to be relative to 
        else if($parent[0] == $(top)[0]) return offset; //Reached the 'top' element we want the offset to be relative to 
        else { //Get parent's relative offset
            var parent_offset = $parent.offsetRelative(top);
            offset.top += parent_offset.top;
            offset.left += parent_offset.left;
            return offset;
        }
    };
    $.fn.positionRelative = function(top){
        return $(this).offsetRelative(top);
    };
}(jQuery));

Remarque : Vous pouvez Utiliser ce sur clic de souris ou de l'Événement mouseover

$(this).offsetRelative("div.item-parent");

J'ai une autre Solution. Soustraire parent valeur de la propriété de l'enfant la valeur de la propriété

$('child-div').offset().top - $('parent-div').offset().top;