So implementieren Sie die relative Positionierung in jquery (drei Methoden)

Relative Positionierung ist eine gängige CSS-Positionierungsmethode, die relativ zur ursprünglichen Position des Elements selbst positioniert werden kann. Allerdings kann mit jQuery auch eine relative Positionierung im DOM erreicht werden. In diesem Artikel wird erläutert, wie die relative Positionierung in jQuery implementiert wird.

1. Verwenden Sie die Methode .position()

In jQuery können Sie die Methode .position() verwenden, um die relative Positionierung eines Elements festzulegen. Diese Methode gibt die Verschiebung relativ zum übergeordneten Element und zum Ansichtsfenster des Elements zurück. Auf dieser Grundlage kann eine relative Positionierung durchgeführt werden.

Zum Beispiel verwendet der folgende Code die Methode .position(), um ein Element 50 Pixel unter seiner ursprünglichen Position zu positionieren:

$(document).ready(function(){
    $("button").click(function(){
        $("div").position({
            my: "left top",
            at: "left+50 bottom",
            of: $(this)
        });
    });
});

Zuerst wird nach dem Laden des Dokuments ein Ereignis ausgelöst, wenn auf eine Schaltfläche geklickt wird. Als nächstes geben wir über .position("left top") die Anfangsposition des Elements als die obere linke Ecke des übergeordneten Elements an und geben dann über .at("left+50 unten" das Element an, das sich um 50 Pixel nach links verschieben soll ") und fixieren Sie es bei Unten. Schließlich bedeutet .of($(this)) die Positionierung des relativ positionierten Elements relativ zur Position der Schaltfläche und nicht relativ zum übergeordneten Element des Elements.

2. Verwenden Sie die .offset()-Methode

Die .offset()-Methode von jQuery kann den Offset eines Elements relativ zum Dokument abrufen oder festlegen, und Sie können sie auch verwenden, um eine relative Positionierung zu erreichen.

Zum Beispiel verwendet der folgende Code die .offset()-Methode, um ein Element 50 Pixel unter seiner ursprünglichen Position zu positionieren:

$(document).ready(function(){
    $("button").click(function(){
        var pos = $("div").offset();
        pos.top=pos.top+50;
        $("div").offset(pos);
    });
});

Ähnlich wird nach dem Laden des Dokuments ein Ereignis ausgelöst, wenn auf eine Schaltfläche geklickt wird. Als nächstes verwenden wir die Methode .offset(), um die Position des Elements zu ermitteln, verschieben es dann um 50 Pixel nach unten, indem wir das Attribut .top des Elements ändern, und setzen schließlich die geänderte Position über die Methode .offset() zurück.

3. Verwenden Sie die Methode .css()

Zusätzlich zur Methode .position() und der Methode .offset() können Sie auch die Methode .css() verwenden, um eine relative Positionierung zu erreichen. Mit dieser Methode können Sie die CSS-Eigenschaften des Elements direkt ändern, z. B. oben, links usw.

Zum Beispiel verwendet der folgende Code die .css()-Methode, um ein Element 100 Pixel unter seiner ursprünglichen Position zu fixieren:

$(document).ready(function(){
    $("button").click(function(){
        $("div").css({
            position: "relative",
            top: "100px"
        });
    });
});

Wenn auf die Schaltfläche geklickt wird, setzt die .css()-Methode die relative Position des Elements auf relativ , und setzen Sie dann den .top-Attributwert auf 100px, wodurch das Element relativ 100 Pixel unter seiner ursprünglichen Position positioniert wird.

Zusammenfassung

Die oben genannten Methoden sind drei Methoden, um eine relative Positionierung in jQuery zu erreichen. Für jede Methode gibt es anwendbare Szenarien: Die Methode

.position() eignet sich für die relative Positionierung, bei der die Position des übergeordneten Elements und des Ansichtsfensters berücksichtigt werden muss. Die Methode

.offset() eignet sich für die relative Positionierung, bei der die Position des Elements relativ zum Dokument berücksichtigt werden muss. Die Methode

.css() eignet sich zum Ändern der relativen Positionierung des CSS-Eigenschaftswerts eines Elements.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie die relative Positionierung in jquery (drei Methoden). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!