如何获取其父元素的左侧和顶部位置答案

【问题标题】：How to get the left and top position of a child element of its parent如何获取其父元素的左侧和顶部位置
【发布时间】：2015-05-20 11:42:36
【问题描述】：

我有一个 div 元素的父子结构（父元素是称为 dartboard 的 div，一个称为 rotationDiv 的子 div，然后有一个称为 crosshair 的子元素）。

dartboard
     > roatingDiv
            > crosshair

飞镖容器包含一个旋转容器 (rotaingDiv)，然后它包含一个子元素（十字准线）。我想找到与飞镖容器相关的 x 和 y 位置。这是我目前拥有的：

$('#dartboard').append( $('#rotatingDiv').append( $('#crosshair') ) );

        X = $('#crosshair').position().left.toFixed(1) 
        Y = $('#crosshair').position().top.toFixed(1) 

console.log("x is "+X+", y is "+Y);

此过程在每秒计时器内运行，在检查 x 和 y 值后，我注意到我只收到与十字线元素在旋转Div 内而不是在飞镖靶有关的信息级别（父级的父级）。有谁知道我该怎么做？

【问题讨论】：

为rotatingDiv 设置静态位置是否适合您？
rotatingDiv 已经设置在静态位置
我猜静态元素不会计算 position() 方法。我目前无法测试它，所以我可能是错的

标签： javascript jquery html dom

【解决方案1】：

试试这个：

var parentLeft = $('#parent').offset().left,
    parentTop = $('#parent').offset().top
    childLeft = $('#child').offset().left,
    childTop = $('#child').offset().top;


// Positions respective to parent
var top = parentTop - childTop,
    left = parentLeft - childLeft;

您也可以使用position。

【讨论】：

我不确定，但如果例如父元素的父元素是静态的，则在这里使用 offset() 可能会更准确。我猜使用 offset() 应该适用于所有情况
@A.Wolff 对！谢谢。更新答案

【解决方案2】：

这应该有效：

var pos1 = $("#crosshair").position();
var pos2 = $("#crosshair").parent().position(); // or $('#rotatingDiv').position();

var x = (pos1.left + pos2.left ).toFixed(1);
var y = (pos1.top  + pos2.top  ).toFixed(1);

小心：

注意：jQuery 不支持获取位置坐标隐藏元素或考虑设置的边框、边距或填充身体元素。

您可以查看API here。

【讨论】：