Wie kann ich in jQuery die Eigenschaften eines Elements "oben links" mit Positionswerten relativ zum übergeordneten Element und nicht zum Dokument festlegen?

.offset([coordinates])Methode legt die Koordinaten eines Elements fest, jedoch nur relativ zum Dokument. Wie kann ich dann die Koordinaten eines Elements relativ zum übergeordneten Element festlegen?

Ich habe festgestellt, dass diese .position()Methode nur "top, left" -Werte relativ zum übergeordneten Element abruft, aber keine Werte festlegt.

Ich habe es mit versucht

$("#mydiv").css({top: 200, left: 200});

funktioniert aber nicht.

Um die Position relativ zum übergeordneten Element festzulegen, müssen Sie die Position position:relativedes übergeordneten position:absoluteElements und des Elements festlegen

$("#mydiv").parent().css({position: 'relative'});
$("#mydiv").css({top: 200, left: 200, position:'absolute'});

Dies funktioniert, weil position: absolute;Positionen relativ zum am nächsten positionierten übergeordneten Element (dh dem nächstgelegenen übergeordneten Element mit einer anderen Positionseigenschaft als der Standardeinstellung static).

$("#mydiv").css('top', 200);

$("#mydiv").css('left', 200);

Sie können die .position- Methode von jQuery UI ausprobieren .

$("#mydiv").position({
  of: $('#mydiv').parent(),
  my: 'left+200 top+200',
  at: 'left top'
});

Überprüfen Sie die funktionierende Demo.

Ich habe festgestellt, dass, wenn der übergebene Wert ein Zeichenfolgentyp ist, ihm 'px' (dh 90px) folgen muss. Wenn der Wert eine Ganzzahl ist, wird der px automatisch angehängt. Die Eigenschaften für Breite und Höhe sind fehlerverzeihender (beide Typen funktionieren).

var x = "90";
var y = "120"
$(selector).css( { left: x, top: y } )        //doesn't work
$(selector).css( { left: x + "px", top: y + "px" } )        //does work

x = 90;
y = 120;
$(selector).css( { left: x, top: y } )        //does work

Code-Offset dynamisch für dynamische Seite

var pos=$('#send').offset().top;
$('#loading').offset({ top : pos-220});

Ich aktualisiere mein Gedächtnis beim Einstellen der Position und komme so spät dazu, dass ich nicht weiß, ob es jemand anderes sehen wird, aber -

Ich mag es nicht, die Position mit zu setzen css(), obwohl es oft in Ordnung ist. Ich denke, die beste position()Wahl ist, den von xdazz angegebenen Setter von jQuery UI zu verwenden . Wenn die jQuery-Benutzeroberfläche jedoch aus irgendeinem Grund keine Option ist (jQuery jedoch), bevorzuge ich Folgendes:

const leftOffset = 200;
const topOffset = 200;
let $div = $("#mydiv");
let baseOffset = $div.offsetParent().offset();
$div.offset({
  left: baseOffset.left + leftOffset,
  top: baseOffset.top + topOffset
});

Dies hat den Vorteil $div, dass das übergeordnete Element nicht willkürlich auf die relative Positionierung eingestellt wird (was wäre $div, wenn das übergeordnete Element selbst absolut in etwas anderem positioniert wäre?). Ich denke , der einzige große Rand Fall ist , wenn $divnicht jeder hat offsetParent, nicht sicher , ob es zurückkehren würde document, nulloder etwas ganz anderes.

offsetParent ist seit jQuery 1.2.6 verfügbar, irgendwann im Jahr 2008, daher funktioniert diese Technik jetzt und wenn die ursprüngliche Frage gestellt wurde.

Verwenden Sie die offset()Funktion von jQuery. Hier wäre es:

$container.offset({
        'left': 100,
        'top': mouse.y - ( event_state.mouse_y - event_state.container_top ) 
    });