Question

我似乎无法在github上找到这个，所以我们走了：

假设我有包含parent的DOM元素position: relative和包含child的另一个元素position: absolute并且是父母的子元素，我该如何获取坐标[ top，left]为我的子元素[相对于父元素]给出一些放置字符串？（即＆＃34;左上角＆＃34;，＆＃34;顶部中间＆＃34;，＆＃34;右下角＆＃34;等等......？）

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

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"}

Answer 1

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

然后您需要做的就是计算：如果您了解mGrid.setOnItemButtonClickListener(..blah blah blah..);和.width属性，则可以通过在左上角添加宽度或高度来计算不同的位置。

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

注意parseInt(child.style.top)用于获取带有“px”的数字。

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

Answer 2

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;
}

Answer 3

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

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/

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

3 个答案: