Comment implémenter le positionnement relatif dans jquery (trois méthodes)

Le positionnement relatif est une méthode de positionnement CSS courante, qui peut être positionnée par rapport à la position d'origine de l'élément lui-même. Cependant, le positionnement relatif peut également être réalisé dans le DOM avec jQuery. Cet article explique comment implémenter le positionnement relatif dans jQuery.

1. Utilisez la méthode .position()

Dans jQuery, vous pouvez utiliser la méthode .position() pour définir le positionnement relatif d'un élément. Cette méthode renvoie le déplacement par rapport à l'élément parent et à la fenêtre d'affichage, et le positionnement relatif peut être effectué sur cette base.

Par exemple, le code suivant utilise la méthode .position() pour positionner un élément 50 pixels en dessous de sa position d'origine :

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

Tout d'abord, une fois le document chargé, un événement est déclenché lorsqu'un bouton est cliqué. Ensuite, nous spécifions la position initiale de l'élément comme coin supérieur gauche de l'élément parent via .position("left top"), puis spécifions l'élément à déplacer de 50 pixels vers la gauche via .at("left+50 bottom ") et corrigez-le en dessous, enfin .of($(this)) signifie positionner l'élément relativement positionné par rapport à la position du bouton, plutôt que par rapport à l'élément parent de l'élément.

2. Utilisez la méthode .offset()

La méthode .offset() de jQuery peut obtenir ou définir le décalage d'un élément par rapport au document, et vous pouvez également l'utiliser pour obtenir un positionnement relatif.

Par exemple, le code suivant utilise la méthode .offset() pour positionner un élément 50 pixels en dessous de sa position initiale :

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

De même, après le chargement du document, un événement est déclenché lorsqu'un bouton est cliqué. Ensuite, nous utilisons la méthode .offset() pour obtenir la position de l'élément, puis le déplaçons vers le bas de 50 pixels en modifiant l'attribut .top de l'élément, et enfin réinitialisons la position modifiée via la méthode .offset().

3. Utilisez la méthode .css()

En plus de la méthode .position() et de la méthode .offset(), vous pouvez également utiliser la méthode .css() pour obtenir un positionnement relatif. Cette méthode permet de modifier directement les propriétés CSS de l'élément, comme top, left, etc.

Par exemple, le code suivant utilise la méthode .css() pour fixer un élément 100 pixels en dessous de sa position d'origine :

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

Lorsque l'on clique sur le bouton, la méthode .css() définit la position relative de l'élément sur relative , puis définissez la valeur de l'attribut .top sur 100px, positionnant ainsi l'élément relativement 100 pixels en dessous de sa position d'origine.

Résumé

Les trois méthodes ci-dessus permettent d'obtenir un positionnement relatif dans jQuery. Chaque méthode a des scénarios applicables :

.position() convient au positionnement relatif qui nécessite de prendre en compte la position de l'élément parent et de la fenêtre d'affichage. La méthode

.offset() convient au positionnement relatif qui doit prendre en compte la position de l'élément par rapport au document. La méthode

.css() convient pour modifier le positionnement relatif de la valeur de la propriété CSS d'un élément.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!