jQuery中position用法

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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,815评论 1 92
  • position()方法的定义和用法: position()函数用于返回当前匹配元素相对于其被定位的祖辈元素的偏移...
    是叶阅读 681评论 0 0
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,026评论 19 139
  • jQuery库中操作页面元素的CSS样式有一个position()函数。position()函数用于返回当前匹配元...
    飞一般的八哥阅读 260评论 0 0
  • 1. 现在每天晚上没有应酬,没有特殊任务,我都会在房间里看书,从7点到10点。有时听听音乐,有了灵感就写作,没有灵...
    我的创业故事采访阅读 322评论 0 2