encuentre el elemento relativo con jQuery

Question

¿Existe una manera sencilla y limpia de encontrar el elemento al que un elemento está teniendo una posición relativa? En otras palabras: encontrar el primer padre que tiene el atributo css position: relative, o el cuerpo-elemento (si no hay elementos padre tiene position: relative).

No sé la clase CSS o lo que sea del padre.

Answer 1

Comenzando con el elemento cargado en $elem

var $closestRelativeParent = $elem.parents().filter(function() { 
    // reduce to only relative position or "body" elements 
    var $this = $(this); 
    return $this.is('body') || $this.css('position') == 'relative'; 
}).slice(0,1); // grab only the "first" 

Answer 2

Asumo que te gustaría saber esto con el fin de calcular la posición del niño desde su primer padre relativa. Sugeriría que el mejor enfoque sería simplemente usar el cálculo .offsetParent() de jQuery, que también buscará los padres de la posición fixed y absolute, ya que estos tendrán un impacto similar en la posición del niño.

Dicho esto, he aquí una rápida maqueta de cómo se puede ir sobre el uso .offsetParent() para calcular su posición relativa (see JSFiddle):

// Given a target, find it's first offset parent, and work out the targets position 
// relative to the parent, by deducting their respective .offset() values 
var $target = $("#bar"), 
    $offsetParent = $target.offsetParent(), 
    oTarget = $target.offset(), 
    oParent = $offsetParent.offset(), 
    posTop = oTarget.top - oParent.top, 
    posLeft = oTarget.left - oParent.left; 

// Validate this works by cloning #bar and positioning the clone directly on top 
// Result should be a blue "bar" rather than a "red" one. 
$target.clone().appendTo($offsetParent).attr("id", "confirm").css({ 
    top: posTop, 
    left: posLeft 
});