如果子元素在父元素里面用的是绝对定位，那么我们可以通过JQ脚本准确的计算出子元素距离父元素各位之间的距离，下面就是方法，供大家参考。

JQ获取子元素距离父元素各边的方法

JQ获取子元素距离父元素各大边的方法代码：

1、获取子元素距离父元素左边的方

$(xx).position().left复制

2、获取子元素距离父元素顶边的方法

$(xx).position().top复制

示例代码：

注意：只有子元素在父元素中，使用是为绝对定位，此方法才会有效果！

<style> .main{ width:300px; height: 350px; background-color: bisque; position: relative; } .item{ width: 150px; height: 200px; background-color: aquamarine; position: absolute; left: 10%; top:15%; } </style> <div class="main"> 这是父亲元素 :feiniaomy.com <div class="item"> 我是子元素！ </div> </div> <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script> <script> //上边距离 52.5 console.log($(.item).position().top); //左边距离 48 30 console.log($(.item).position().left); //右边距离 120 （父元素的款 - 左边距离 - 子元素的宽） console.log($(.main).width() - $(.item).position().left - $(.item).width() ); //下边距离 97.5 （父元素的高 - 上边距离 - 子元素的高） console.log($(.main).height() - $(.item).position().top - $(.item).height() ); </script>复制

分享到：