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

144

.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.

Max
quelle

Antworten:

227

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).

Champ
quelle
13
$("#mydiv").css({top: '200px', left: '200px', position:'absolute'});<- gut $("#mydiv").css({top: '200', left: '200', position:'absolute'});<- schlecht. Wenn Positionswerte Zeichenfolgen sind , müssen Sie anscheinend die Einheiten einschließen, da dies sonst keine Auswirkungen hat.
Bob Stein
1
Diese Notiz über einen relativ positionierten Elternteil ersparte mir viel Frust. Danke dir.
NuclearPeon
39
$("#mydiv").css('top', 200);

$("#mydiv").css('left', 200);
MMALSELEK
quelle
7
Weitere Anweisungen würden hier helfen
Taube
1
oder $ ("# mydiv"). css ({'top': 200, 'left': 200});
Nick B
Mit anderen Worten, das OP wäre korrekt gewesen, wenn sie einfach "oben" und "links" zitiert hätten?
RufusVS
13

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.

xdazz
quelle
10
.position () hat keinen Setter
devnull69
Wo genau steht, dass es die Position einstellen kann? Ich denke, es kann nur die Werte finden, nicht ändern.
Chris
1
Die Methode .position () setzt keine Werte!
Max
Sehr interessant!!! Ihr Code ist sehr nützlich, wenn Sie die CSS-Positionseigenschaft des übergeordneten Elements nicht festlegen können (wie in der Hauptantwort erwähnt), da es sich um ein UI-Widget handelt und Sie die Einstellungen für eine reibungslose Aktivität nicht ändern möchten. Dies geschieht natürlich nur, wenn Sie die jQuery-Benutzeroberfläche verwenden. Ich habe dieses kleine Problem mit dem "ziehbaren" Widget der jQuery-Benutzeroberfläche gefunden.
Max
6

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
Derek Wade
quelle
6

Code-Offset dynamisch für dynamische Seite

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

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.

Knickum
quelle
0

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 ) 
    });
Sreekanth S.
quelle