Get position of element based on another

Question

Get position of element based on another

Navigation

#1 by (2 votes)
#2 by (0 votes)

2

You have 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 take the position of the Secondary element in relation to the boxPrincipal , ie in the case of the above example it would give more or less:

X: 10px Y: 20px;

I do not want to get the margin-left or margin-top, but the position of the element. Notice that in the first div you have another setting, but do not I want to get it from the first div, but from boxPrincipal.

javascript jquery

asked by anonymous 18.02.2017 / 22:53

2 answers

0

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

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

X is the horizontal offset relative to .boxPrincipal , and Y , vertical.

21.02.2017 / 10:25

How do I display the FloatingActionButton button? Inject $ state (ui-router) into $ http interceptor is causing circular dependency error, how to solve?

score 2 · Accepted Answer

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

In any case, you can use the getBoundingClientRect method to get the position of both, then calculate the difference using the values of top and left

Remembering that for margem to be calculated correctly, the parent element must have overflow set.

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 want only the distance between the child element and the parent, you can use the properties offsetTop and offsetLeft .

For the example below, the value of% of parent% must be position , relative or absolute .

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>