J'ai l'habitude de travailler avec jQuery. Dans mon projet actuel cependant, j'utilise zepto.js. Zepto ne fournit pas de position()méthode comme le fait jQuery. Zepto n'est livré qu'avec offset().

Une idée comment je peux récupérer le décalage d'un conteneur par rapport à un parent avec js pur ou avec Zepto?

Avertissement: jQuery, pas de JavaScript standard

element.offsetLeftet element.offsetTopsont les propriétés javascript pures pour trouver la position d'un élément par rapport à son offsetParent; étant l'élément parent le plus proche avec une position de relativeouabsolute

Alternativement, vous pouvez toujours utiliser Zepto pour obtenir la position d'un élément ET son parent, et simplement 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é.

en pur js, utilisez simplement offsetLeftet offsetToppropriétés.
Exemple de violon: http://jsfiddle.net/WKZ8P/

var elm = document.querySelector('span');
console.log(elm.offsetLeft, elm.offsetTop);

p   { position:relative; left:10px; top:85px; border:1px solid blue; }
span{ position:relative; left:30px; top:35px; border:1px solid red; }

<p>
    <span>paragraph</span>
</p>

Je l'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 ceci

getWindowRelativeOffset(top, inputElement);

Je me concentre sur IE uniquement selon mon objectif, mais des choses similaires peuvent être faites pour d'autres navigateurs.

Ajoutez le décalage de l'événement au décalage de l'élément parent pour obtenir la position de décalage absolue de l'événement.

Un exemple :

HTMLElement.addEventListener('mousedown',function(e){

    var offsetX = e.offsetX;
    var offsetY = e.offsetY;

    if( e.target != this ){ // 'this' is our HTMLElement

        offsetX = e.target.offsetLeft + e.offsetX;
        offsetY = e.target.offsetTop + e.offsetY;

    }
}

Lorsque la cible de l'événement n'est pas l'élément dans lequel l'événement a été enregistré, elle ajoute le décalage du parent au décalage de l'événement en cours afin de calculer la valeur de décalage "Absolu".

Selon Mozilla Web API: "La propriété en lecture seule HTMLElement.offsetLeft renvoie le nombre de pixels dont le coin supérieur gauche de l'élément actuel est décalé vers la gauche dans le nœud HTMLElement.offsetParent. "

Cela se produit principalement lorsque vous avez enregistré un événement sur un parent qui contient plusieurs autres enfants, par exemple: un bouton avec une icône intérieure ou une étendue de texte, un liélément avec des étendues intérieures. etc...

Exemple

Donc, si nous avions un élément enfant avec un identifiant de "child-element" et que nous voulions obtenir sa position gauche / supérieure par rapport à un élément parent, disons un div qui avait une classe de "item-parent", nous aurions utilisez ce code.

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

Plugin Enfin, pour le plugin actuel (avec quelques notes expliquant 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 mouseClick ou mouseover événement

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

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

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

Bien sûr, c'est facile avec le JS pur, il suffit de faire ceci, de travailler aussi pour les panneaux HTML 5 fixes et animés, j'ai créé et essayé ce code et cela fonctionne pour n'importe quel navigateur (y compris IE 8):

<script type="text/javascript">
    function fGetCSSProperty(s, e) {
        try { return s.currentStyle ? s.currentStyle[e] : window.getComputedStyle(s)[e]; }
        catch (x) { return null; } 
    }
    function fGetOffSetParent(s) {
        var a = s.offsetParent || document.body;

        while (a && a.tagName && a != document.body && fGetCSSProperty(a, 'position') == 'static')
            a = a.offsetParent;
        return a;
    }
    function GetPosition(s) {
        var b = fGetOffSetParent(s);

        return { Left: (b.offsetLeft + s.offsetLeft), Top: (b.offsetTop + s.offsetTop) };
    }    
</script>