Deep Insider の Tutor コーナー
>>  Deep Insider は本サイトからスピンオフした姉妹サイトです。よろしく! 
jQuery逆引きリファレンス

jQuery逆引きリファレンス

親要素に対する相対的な表示位置を取得するには?(position)

2016年6月16日

positionメソッドを使って、要素の「親要素からの相対位置」を取得する基本的な方法を説明する。なお、設定はできない。

  • このエントリーをはてなブックマークに追加

 positionメソッドを利用することで、現在の要素の親要素からの相対位置を取得できます。ドキュメント上の相対位置を取得するoffsetメソッドとは異なりますので、区別して利用ください。また、offsetメソッドと同じく、不可視の要素に対しては動作しません。

HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>jQuery TIPS</title>
<style>
body{
  margin:0;
}

#main{
  position:relative;
  width: 200px;
  height: 200px;
  top: 10px;
  left: 10px;
  border: 1px solid #000000;
}

#child{
  position:relative;
  width: 50px;
  height: 50px;
  top:100px;
  left: 100px;
  background-color: Yellow;
}
</style>
</head>
<body>
<div id="main">
  <div id="child"></div>
</div>
<script src="http://code.jquery.com/jquery-1.12.3.min.js"></script>
<script>
$(function () {
  var c = $('#child').position();
  console.log('top: ' + c.top);
  console.log('left: ' + c.left);
});
</script>
</body>
</html>
親要素に対する要素位置を取得するコード(pos.html)
コンソール
top: 100
left: 100
要素位置をログに表示(開発者ツールから確認)

 positionメソッドの戻り値は、top(垂直方向)/left(水平方向)プロパティを持ったオブジェクトです。位置情報は、margin/border/paddingから計算されます。

 なお、offsetメソッドと異なり、positionメソッドには設定のための機能は備わっていない点にも注意してください。

処理対象:要素の表示位置 カテゴリ:属性
API:.position() カテゴリ:CSS|Offset(オフセット)|Manipulation(操作) > Style Properties(スタイルプロパティ)

※以下では、本稿の前後を合わせて5回分(第45回~第49回)のみ表示しています。
 連載の全タイトルを参照するには、[この記事の連載 INDEX]を参照してください。

jQuery逆引きリファレンス
45. ページのスクロール位置を設定/取得するには?(scrollTop/scrollLeft)

scrollTop/scrollLeftメソッドを使ってページスクロールの垂直位置/水平位置を設定もしくは取得するための基本的な方法を説明する。

jQuery逆引きリファレンス
46. 要素の表示位置を取得/設定するには?(offset)

offsetメソッドを使って、要素の「ドキュメント上の相対位置」を取得/設定する基本的な方法を説明する。

jQuery逆引きリファレンス
47. 【現在、表示中】≫ 親要素に対する相対的な表示位置を取得するには?(position)

positionメソッドを使って、要素の「親要素からの相対位置」を取得する基本的な方法を説明する。なお、設定はできない。

jQuery逆引きリファレンス
48. フォーム要素からの入力値を取得するには?(val)

valメソッドを使って、フォーム要素の値を取得する方法を説明。また、ラジオボタン/チェックボックス/リストボックス(複数選択)の場合の注意点も示す。

jQuery逆引きリファレンス
49. ラジオボタン/チェックボックス/選択ボックスの選択テキストを取得するには?(val)

valメソッドを使って選択テキストを取得する方法を、ラジオボタン/チェックボックス/選択ボックス/リストボックスなどフォーム要素ごとに説明する。

サイトからのお知らせ

Twitterでつぶやこう!