jqueryで相対位置決めを実装する方法（3つの方法）

相対配置は一般的な CSS 配置方法であり、要素自体の元の位置を基準にして配置できます。ただし、相対的な位置決めは、jQuery を使用して DOM 内で実現することもできます。この記事ではjQueryで相対位置を実装する方法を紹介します。

1. .position() メソッドを使用する

jQuery では、.position() メソッドを使用して要素の相対位置を設定できます。このメソッドは、要素の親要素およびビューポートに対する相対的な変位を返し、これに基づいて相対的な位置決めを実行できます。

たとえば、次のコードは .position() メソッドを使用して要素を元の位置から 50 ピクセル下に固定します。

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

まず、ドキュメントが読み込まれた後、イベントをクリックします。ボタンが押されたときにトリガーされます。次に、.position("left top") によって要素の初期位置を親要素の左上隅として指定し、次に .at("left 50bottom" によって左に 50 ピクセル移動する要素を指定します) ) を以下に修正し、最後に .of($(this)) は、相対的に配置された要素を、要素の親要素を基準とするのではなく、ボタンの位置を基準にして配置することを意味します。

2. .offset() メソッドを使用する

jQuery の .offset() メソッドは、ドキュメントに対する相対的な要素のオフセットを取得または設定でき、また、これを使用して相対的なオフセットを実現することもできます。位置決め。

たとえば、次のコードは .offset() メソッドを使用して、要素を初期位置から 50 ピクセル下に配置します。

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

同様に、ドキュメントが読み込まれた後、イベントがボタンが押されたときにトリガーされます。次に、.offset() メソッドを使用して要素の位置を取得し、要素の .top 属性を変更して位置を 50 ピクセル下に移動し、最後に .offset() メソッドを通じて変更された位置をリセットします。

3. .css() メソッドを使用する

.position() メソッドと .offset() メソッドに加えて、.css() メソッドを使用して次のことを実現することもできます。相対的な位置決め。このメソッドを使用すると、要素の CSS プロパティ (上、左など) を直接変更できます。

たとえば、次のコードは .css() メソッドを使用して、要素を元の位置から 100 ピクセル下に固定します。

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

ボタンがクリックされると、.css() メソッドがused 要素の相対位置を相対位置に設定し、.top 属性値を 100px に設定します。これにより、要素は元の位置から相対的に 100 ピクセル下に配置されます。

概要

上記は、jQuery で相対位置を実現するための 3 つのメソッドです。各メソッドには適用可能なシナリオがあります:

.position() メソッドは、次のような状況に適しています。要素の親要素とビューポートの位置の相対的な位置を考慮します。

.offset() メソッドは、ドキュメントに対する要素の位置を考慮する必要がある相対位置決めに適しています。

.css() メソッドは、要素の CSS 属性値の相対位置を変更するのに適しています。

以上がjqueryで相対位置決めを実装する方法（3つの方法）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。