Как получить координаты размещения абсолютно позиционированного элемента относительно другого?

Question

я не могу найти это на GitHub, так что здесь мы идем:

Предположим, у меня есть DOM элемент parent который содержит position: relative и другой элемент, который содержит childposition: absolute и ребенок родителя, как я могу идти о получении координаты [вверху, слева] для моего дочернего элемента [по отношению к родительскому] с учетом некоторой строки размещения? (Т.е. "верхний левый", "верхний средний", "нижний правый", и так далее ...?)

В идеале, что-то вроде этого:

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

«Когда позиция устанавливается в абсолютной, элемент удаляется из обычного потока документов, то есть он больше не занимает места и может перекрываться с другими элементами. Кроме того, его верхнее и левое свойства могут использоваться для его абсолютно позиционирования относительно верхнего левого угла ближайшего охватывающий элемент, свойство позиции которого не является статическим или относительно документа, если такой закрытый элемент не существует ». - http://eloquentjavascript.net/13_dom.html

Тогда все, что вам нужно сделать, это вычислить: Если вы знаете .width и .height свойства, вы можете вычислить различные места, добавив в верхнем левом углу, количество ширины или высоты.

ex. (верхняя часть) = ((parseInt(child.style.left) + parseInt(child.style.width)/2), parseInt(child.style.top)) (x, y)

примечание parseInt используется для получения номера без «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} 
} 

Когда вы абсолютное положение элемента, оно является абсолютным для ближайшего родственника (или документа, если ни один из них не находится в относительном положении). Поэтому, если вы хотите получить позицию относительно ее «относительного» родителя, вам просто нужно «естественное» смещение.В моем коде я также добавить полный или половину высоты или ширины, в зависимости от у и х переменных, переданных в качестве аргументов, например:

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

Live Preview:

http://jsfiddle.net/884ud4yj/