如何获取绝对定位元素相对于另一个元素的放置坐标？

我似乎无法找到这个在github所以在这里，我们去：如何获取绝对定位元素相对于另一个元素的放置坐标？

假设我有一个包含position: relative与其它元素child其中包含position: absolute，是父母的孩子DOM元素parent，我怎么能去获得坐标[顶部，左侧]为我的子元素[相对于父母]给出了一些放置字符串？（即 “左上”， “顶部中间”， “右下角”，等等...？）

理想的情况下，这样的事情：

var coordinates = getRelativeCoordinates({ 
    el:   child  // Child element which contains "position: absolute" 
    relativeToEl: parent  // Parent container which contains "position: relative" 
    placement: "top left" // "top left" || "top middle" || "top right" || "right top" || etc... 
}); 

console.log(coordinates); 
>> {top: "-100px", left: "0px"}

来源

2015-06-25 dipole_moment

“我怎么能得到我的孩子元素的坐标[顶部，左边] ...“参考点的坐标？ – light

谢谢。我更新了这个问题。我需要相对于父元素的子元素的坐标。 –

“当位置被设置为绝对的，该元素将从正常的文档流中移除 - 也就是说，它不再占用空间并可能与其他元素重叠。还可以使用其顶部和左侧属性相对于最近的左上角将其绝对定位封闭位置属性不是静态的元素，或者如果不存在这种封闭元素，则相对于文档。“ - http://eloquentjavascript.net/13_dom.html

然后，所有你需要做的是计算：如果你知道.width和.height属性，可以通过向左上方宽度或高度的量计算出不同的地方。

ex。（顶部中间）=（(parseInt(child.style.left) + parseInt(child.style.width)/2),parseInt(child.style.top)）（x，y）

note用于得到一个没有“px”的数字。

你将需要写出每个可能的位置，像这样的计算。您可以将它们存储为数组[left，top]或对象{left：，top：}。

来源

2015-06-25 14:51:04 JavaScriptArray

DEMO

的HTMLElement.offsetLeft只读方法返回当前元素的左上角偏移到左侧HTMLElement.offsetParent节点（即，具有位置的绝对或相对最近的父）内的像素的数量。

的JavaScript

var obj = document.getElementById("child"); 
var left = obj.offsetLeft; 
var top = obj.offsetTop; 

alert("left : " + left + ", right : " + top); 

// offsetTop, offsetWidth, and offsetHeight are other such method.

HTML

<div class="a"></div> 
<div class="b"></div> 
<div id="parent"> 
    <div id="child"></div> 
</div>

CSS

body, html { 
    font-size:0; 
} 
.a { 
    height: 100px; 
    background: #bbb; 
    border: 1px solid #333; 
} 
.b { 
    height: 300px; 
    width: 50px; 
    background: #aaa; 
    display:inline-block; 
    border: 1px solid #999; 
} 
#parent { 
    position: relative; 
    height: 300px; 
    width: 300px; 
    background: #ccc; 
    display:inline-block; 
    border: 1px solid #AAA; 
} 
#child { 
    position: absolute; 
    top: 100px; 
    left: 100px; 
    width: 100px; 
    height: 100px; 
    background: #d3145a; 
    border: 1px solid #555; 
}

来源

2015-06-25 15:10:59 4dgaurav

至于你的要求，你需要这样的功能：

function getCoordinates(element, y, x) { 
    // possible values: top, middle, bottom 
    y = y || 'top'; 
    // possible values: left, middle, right 
    x = x || 'left'; 

    var top = element.offsetTop, 
     left = element.offsetLeft; 

    switch (y) { 
     case 'middle': 
      top += element.offsetHeight/2; 
      break; 
     case 'bottom': 
      top += element.offsetHeight; 
    } 

    switch (x) { 
     case 'middle': 
      left += element.offsetWidth/2; 
      break; 
     case 'right': 
      left += element.offsetWidth; 
    } 
    return {top: top, left: left} 
}

当你绝对定位一个元素时，它对于最近的相对元素是绝对的（或者如果没有相对定位的话就是文档）。所以如果你想获得相对于它的“相对”父亲的位置，你只需要它的“自然”偏移。在我的代码我还添加完整或高度或宽度，取决于y的一半，x作为参数传递变量，就像这样：

console.log(getCoordinates(document.getElementById('inner'))); 
console.log(getCoordinates(document.getElementById('inner'), 'middle', 'middle')); 
console.log(getCoordinates(document.getElementById('inner', 'bottom', 'right')));

实时预览：

http://jsfiddle.net/884ud4yj/

来源

2015-06-25 15:15:57 Jack

如何获取绝对定位元素相对于另一个元素的放置坐标？

回答

相关问题