如何獲取絕對定位元素相對於另一個元素的放置座標？

我似乎無法找到這個在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

如何獲取絕對定位元素相對於另一個元素的放置座標？

回答

相關問題