Get element position based on another

Question

Has two 3 Divs:

<div style="margin-top: 30px;width:50px;height:50px;"></div>

<div class="boxPrincipal">
    <div class="elementoSecundario" style="width:100px;height:80px;margin-top:10px;margin-left: 20px;">
      Conteúdo
    </div>
</div>

I needed to get the position of elementSecundario in relation to the boxPrincipal, that is, in the case of the above example, it would give more or less:

X: 10px Y: 20px;

I don’t want to take the margin-left or margin-top, but the position of the element. Note that the first div has another setting, but nay I want to take from the first div and yes from the boxPrincipal.

Answer 1

From my point of view, it would be x: 20 and y: 10, since there is a displacement of 20px na horizontal and 10px na vertical.

in whatever way, you can use the method getBoundingClientRect to take the position of both, then calculate the difference using the values of the top and left

remembering that for the margem be calculated correctly, the parent element must have the overflow setate.

var boxPrincipal = document.querySelector(".boxPrincipal");
var elementoSecundario = document.querySelector(".elementoSecundario");

var boundaries = {
  principal: boxPrincipal.getBoundingClientRect(),
  secundario: elementoSecundario.getBoundingClientRect()
}

console.log({
  x: boundaries.secundario.top - boundaries.principal.top,
  y: boundaries.secundario.left - boundaries.principal.left,
})

.boxPrincipal {
  overflow: hidden;  
  background-color: teal;
}

.elementoSecundario {
  width:100px;
  height:80px;
  margin-top:10px;
  margin-left: 20px;
  background-color: purple;
}

.boxQualquer {
  margin-top: 30px;
  width:50px;
  height:50px;
  background-color: orange;
}

<div class="boxQualquer"></div>
<div class="boxPrincipal">
    <div class="elementoSecundario">
        Conteúdo
    </div>
</div>

on the other hand, if you only want the distance between the child element and the parent, you can use the properties offsetTop and offsetLeft.

For the example below to work, the value of position of the parent element should be relative, absolute or fixed.

var elementoSecundario = document.querySelector(".elementoSecundario");
console.log({
  x: elementoSecundario.offsetTop,
  y: elementoSecundario.offsetLeft,
})

.boxPrincipal {
  position: relative;
  overflow: hidden;  
  background-color: teal;
}

.elementoSecundario {
  width:100px;
  height:80px;
  margin-top:10px;
  margin-left: 20px;
  background-color: purple;
}

.boxQualquer {
  margin-top: 30px;
  width:50px;
  height:50px;
  background-color: orange;
}

<div class="boxQualquer"></div>
<div class="boxPrincipal">
    <div class="elementoSecundario">
        Conteúdo
    </div>
</div>

Answer 2

var p1 = $('.elementoSecundario').offset();
var p2 = $('.elementoSecundario').position();

var X = (p1.left - p2.left);
var Y = (p1.top - p2.top)

X is the horizontal displacement in relation to the .boxPrincipal, and Y, the vertical.