How to implement relative positioning in jquery (three methods)

Relative positioning is a common CSS positioning method, which can be positioned relative to the original position of the element itself. However, relative positioning can also be achieved in the DOM with jQuery. This article will introduce how to implement relative positioning in jQuery.

1. Use the .position() method

In jQuery, you can use the .position() method to set the relative positioning of an element. This method returns the displacement relative to the element's parent element and viewport, and relative positioning can be performed on this basis.

For example, the following code uses the .position() method to fix an element 50 pixels below its original position:

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

First, after the document is loaded, click an An event is triggered when the button is pressed. Next, we specify the initial position of the element as the upper left corner of the parent element through .position("left top"), and then specify the element to move 50 pixels to the left through .at("left 50 bottom") and fix it below , and finally .of($(this)) means positioning the relatively positioned element relative to the position of the button, rather than relative to the element's parent element.

2. Use the .offset() method

jQuery’s .offset() method can get or set the offset of an element relative to the document, and you can also use it to achieve relative positioning .

For example, the following code uses the .offset() method to position an element 50 pixels below its initial position:

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

Similarly, after the document has loaded, click an An event is triggered when the button is pressed. Next, we use the .offset() method to get the position of the element, then move it down 50 pixels by modifying the .top attribute of the element, and finally reset the modified position through the .offset() method.

3. Use the .css() method

In addition to the .position() method and the .offset() method, you can also use the .css() method to achieve relative positioning. This method allows you to directly modify the CSS properties of the element, such as top, left, etc.

For example, the following code uses the .css() method to fix an element 100 pixels below its original position:

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

When the button is clicked, the .css() method is used Set the relative position of the element to relative, and then set the .top attribute value to 100px, thereby positioning the element relatively 100 pixels below its original position.

Summary

The above are three methods to achieve relative positioning in jQuery. Each method has applicable scenarios:

.position() method is suitable for situations where you need to consider The relative positioning of the element's parent element and the viewport position. The

.offset() method is suitable for relative positioning that requires consideration of the element's position relative to the document. The

.css() method is suitable for changing the relative positioning of the CSS attribute value of an element.

The above is the detailed content of How to implement relative positioning in jquery (three methods). For more information, please follow other related articles on the PHP Chinese website!