position() 方法返回匹配元素相对于父元素的位置(偏移)。
所谓"被定位的元素",就是元素的CSS position属性值为absolute、relative或fixed(只要不是默认的static即可)。
该方法返回的对象包含两个整型属性:top 和 left,以像素计。
此方法只对可见元素有效。
必须在他本身设置left与top值,该物体还必须显示不可以隐藏,必须要有定位。
与offset()不同的是:position()返回的是相对于被定位的祖辈元素的坐标,offset()返回的是相对于当前文档的坐标。此外,position()函数无法用于设置操作。如果当前元素的祖辈元素全部都是默认定位(static),那么该函数返回的偏移位置与offset()函数相同。
h2的祖辈元素全部为默认定位,则position()返回的偏移位置和offset()函数一致。
html代码
<div><h1>zz</h1></div>
<p>hh</p>
<h2>ssss</h2>
css代码
*{
margin:0;
padding:0;
}
div{
width:100px;
height:100px;
background:red;
margin:500px auto;
position:absolute;
left:20px;
top:20px;
}
p{
display:none;
position:relative;
left:50px;
top:50px;
}
h1{
position:relative;
left:10px;
top:10px;
}
h2{
left:50px;
top:100px;
}
js代码
var a=$("div").position();
var a1= $("div").offset();
console.log(a.left);//20
console.log(a.top);//20
console.log(a1.left);//441
console.log(a1.top);//520
//隐藏时无论position还是offset都无法获取到left、top值
var b=$("p").position();
var b1=$("p").offset();
console.log(b.left);//0
console.log(b.top);//0
console.log(b1.left);//0
console.log(b1.top);//0
var c=$("h1").position();
var c1=$("h1").offset();
console.log(c.left);//10
console.log(c.top);//10
console.log(c1.left);//451
console.log(c1.top);//530
//祖辈元素全部为默认定位,则position()返回的偏移位置和offset()函数一致。
var d=$("h2").position();
var d1=$("h2").offset();
console.log(d.left);//0
console.log(d.top);//1100
console.log(d1.left);//0
console.log(d1.top);//1100