jQuery ile göreceli elemanı bulun

Question

Bir öğenin göreli konumunun sahip olduğu öğeyi bulmak için basit ve temiz bir yordam yolu var mı? Başka bir deyişle: css özniteliği position: relative olan ilk üst öğeyi veya gövde öğesinin (üst öğelerin hiçbiri position: relative içeriyorsa) bulun.

Css sınıfını veya üst bilginin ne olduğunu bilmiyorum. öğeden başlayarak

Answer 1

Ben bunu ilk bağıl ebeveyn var gelen çocuğun konumunu hesaplamak için bu bilmek isterdim varsayalım

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

$elem içinde yüklü. Daha iyi bir yaklaşımın jQuery'nin .offsetParent() hesaplamasını kullanmasıdır, bu da fixed ve absolute pozisyonlarının ebeveynleri için bir araya gelecek, çünkü bunlar çocuğun pozisyonu üzerinde benzer bir etkiye sahip olacaktır.

söyleyen

, işte burada göreli pozisyon (see JSFiddle) var hesaplamak için .offsetParent() kullanma hakkında gitmek nasıl hızlı bir mock-up var:

// 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 
});