对jQuery中css函数中position的理解

获取物体相对于父级的偏移量,也就是top值和left值,而这个只对可见物体有用

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #box{
                position: absolute;top: 100px;left: 100px;width: 200px;height: 200px;
                border: 1px solid red;
            }
            p{
                position: absolute;top: 100px;left: 100px;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <p>This is a paragraph.</p>
            <button>获得 p 元素的位置坐标</button>
        </div>
    </body>
</html>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript">
      $("button").click(function(){
        x=$("p").position();
        console.log("positionLeft:" + x.left + "positionTop:" + x.top);
      });
</script>

结果如下:


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

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,786评论 1 92
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 134,841评论 18 139
  • 1. Java基础部分 基础部分的顺序:基本语法,类相关的语法,内部类的语法,继承相关的语法,异常的语法,线程的语...
    子非鱼_t_阅读 31,740评论 18 399
  • 35/90 喜乐操练(应许之地) 启示录:2.7 得胜的,我必将神乐园中生命树的果子赐给他吃。 书摘: 吗哪、晨星...
    邹小羊羊阅读 778评论 0 0
  • 1. 前些时候,有朋深夜来电,大倒苦水。她试图出版一本《三年计划、五年目标》。 比如为了两年后能拿着全奖offer...
    写给自己的救赎阅读 306评论 0 2