jQuery 「CSS操作」要素の位置表示を調べる

.offset()メソッドが画面の端からの位置を取得するのに対して、.position()メソッドは要素の親要素からの相対位置を返します。戻り値には、「top」と「left」の２つのプロパティが含まれます。対象要素のmargin、padding、borderの値にピクセル以外が指定されている場合（例えば「margin: 0 auto;」など）は、正しい位置が返されないことがあります。

書式

$( 対象要素 ).position();

var offset = $('#p:first').position();

サンプル

要素の表示位置を調べる

<html>
      <head>
        <meta charset="UTF-8">
        <title>テストページ</title>
        <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
        <style>
          div{
            margin: 2px;
            padding: 10px;
            border: 2px gray solid;
            width: 300px;
          }
          p{
            width: 150px;
            height: 100px;
            border:2px pink solid;
            padding: 5px;
            margin: 10px;
            background-color: gray;
            color: white;
          }
        </style>
  </head>
  <body>
    <div>
      <p>Paragraph</p>
    </div>
    <span></span>
    <script>
      $(document).ready(function(){
        var pos = $('p').position();
        $('span').append('P要素は親要素から('+pos.left+','+pos.top+')の位置に表示されます。');
      });
    </script>
    </body>  
</html>

カテゴリー:CSS操作JavaScriptjQuery