<style>
#rect0{
position:relative;
width:100px;
height:100px;
}
#rect0 p{
margin:20px;
background-color:#89e887;
width:60px;
height:60px;
}
</style>
$('#btn0').click(function(){
$('#input0').val( $('#rect0').position().top );
$('#input1').val( $('#rect0').position().left );
$('#input2').val( $('#rect0').offset().top );
$('#input3').val( $('#rect0').offset().left );
$('#input4').val( $('#rect0 p').position().top );
$('#input5').val( $('#rect0 p').position().left );
$('#input6').val( $('#rect0 p').offset().top );
$('#input7').val( $('#rect0 p').offset().left );
});
position()は、親要素から見た座標を取得します。 offset()は、親要素関係なく、documentから見た座標を取得します。
座標を取得する
| position | top : px |
|---|---|
left : px |
|
| offset | top : px |
left : px |
| position | top : px |
|---|---|
left : px |
|
| offset | top : px |
left : px |