Sie wollen ein neues Element relativ zu einem bestehenden Element positionieren.

Holen Sie sich die Breite, Höhe und den Offset des bestehenden Elements und nutzen Sie diese Werte, um das neue Element dementsprechend zu positionieren.

Schauen Sie sich folgenden HTML-Code an:

<style>
#foo {
    width: 300px;
    height: 100px;
    border: 1px solid red;
    padding: 5px;
}
#tooltip {
    border: 1px solid black;
    padding: 5px;
    background-color: #fff;
}
</style>

<div id="foo">Ein bestehendes Element</div>

Der folgende Code fügt nun ein Element als Geschwister-Element hinzu, positioniert es aber »innerhalb« des Elements – 10 Pixel vom oberen und linken Rand des bestehenden Elements entfernt und 20 Pixel kleiner:

jQuery(document).ready(function() {
    var $foo = jQuery('#foo'),
        fooPosition = $foo.position(),
        $tooltip = $('<div id="tooltip">Ein neues Element</div>').insertAfter($foo);

    $tooltip.css({
        position : 'absolute',
        top : fooPosition.top + 10,
        left : fooPosition.left + 10,
        width : $foo.width() - 20
    });
});

Wollen Sie das neue Element irgendwo anders auf der Seite platzieren – soll es also kein Geschwister-Element des bestehenden Elements werden – dann können Sie Ihren Code so anpassen, dass er sich am Offset des ursprünglichen Elements anstatt an der Position orientiert:

jQuery(document).ready(function() {
    var $foo = jQuery('#foo'),
        fooOffset = $foo.offset(),
        $tooltip = $('<div id="tooltip">Ein neues Element</div>').appendTo('body');

    $tooltip.css({
        position : 'absolute',
        top : fooOffset.top + 10,
        left : fooOffset.left + ($foo.width() / 2),
        width : $foo.width() - 20
    });
});