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（スタイルプロパティ）
API：.position() カテゴリ：CSS｜Offset（オフセット）｜Manipulation（操作） > Style Properties（スタイルプロパティ）
※以下では、本稿の前後を合わせて5回分（第45回～第49回）のみ表示しています。
連載の全タイトルを参照するには、［この記事の連載 INDEX］を参照してください。
45. ページのスクロール位置を設定／取得するには？（scrollTop／scrollLeft）
scrollTop／scrollLeftメソッドを使ってページスクロールの垂直位置／水平位置を設定もしくは取得するための基本的な方法を説明する。
47. 【現在、表示中】≫ 親要素に対する相対的な表示位置を取得するには？（position）
positionメソッドを使って、要素の「親要素からの相対位置」を取得する基本的な方法を説明する。なお、設定はできない。
48. フォーム要素からの入力値を取得するには？（val）
valメソッドを使って、フォーム要素の値を取得する方法を説明。また、ラジオボタン／チェックボックス／リストボックス（複数選択）の場合の注意点も示す。
49. ラジオボタン／チェックボックス／選択ボックスの選択テキストを取得するには？（val）
valメソッドを使って選択テキストを取得する方法を、ラジオボタン／チェックボックス／選択ボックス／リストボックスなどフォーム要素ごとに説明する。
